我想用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文档2.3.2和3,类应该这样定义:

2.3.2引导

<ul class="inline">
  <li>...</li>
</ul>

引导3

<ul class="list-inline">
  <li>...</li>
</ul>

来完成雷蒙德的回答

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/内联

根据Bootstrap文档,你需要将类'inline'添加到列表中;是这样的:

<ul class="inline">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

然而,这并不管用,因为在引导CSS文件中似乎缺少一些CSS引用类“内联”。因此,另外,添加以下行到你的CSS文件,使其工作:

ul.inline > li, ol.inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

虽然TheBrent的答案总体上是正确的,但它并没有回答如何以官方引导方式做到这一点的问题。bootstrap的标记很简单:

<ul class="inline">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

http://jsfiddle.net/MgcDU/4602/

引导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>