我想用Bootstrap内联显示一个列表。是否有一个类我可以添加从Bootstrap来实现这一点?
当前回答
引导5:
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
其他回答
我在bootstrap.css文件中找不到任何特定的东西。因此,我将css添加到自定义css文件中。
.inline li {
display: inline;
}
来完成雷蒙德的回答
2.3.2引导
<ul class="inline">
<li>...</li>
</ul>
引导3
<ul class="list-inline">
<li>...</li>
</ul>
引导4
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
来源:http://v4-alpha.getbootstrap.com/content/typography/内联
引导5:
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
虽然TheBrent的答案总体上是正确的,但它并没有回答如何以官方引导方式做到这一点的问题。bootstrap的标记很简单:
<ul class="inline">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
源
http://jsfiddle.net/MgcDU/4602/
我惊讶,列表内联不是在bootstrap 4,然后最后我得到了它在bootstrap 4文档。
引导3和4
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
来源:http://v4-alpha.getbootstrap.com/content/typography/内联