如何使用Twitter的Bootstrap显示内联列表

Question

我想使用Bootstrap显示内联列表.我可以从Bootstrap添加一个类来实现这个目标吗？

Answer 1

Bootstrap 2.3.2

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

Bootstrap 3

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

Bootstrap 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/#inline

Answer 2

根据2.3.2和3的Bootstrap文档,该类应该像这样定义:

Bootstrap 2.3.2

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

Bootstrap 3

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

Answer 3

虽然TheBrent的答案一般都是正确的,但它没有回答如何以官方引导方式进行的问题.bootstrap的标记很简单:

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

资源

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

Answer 4

完成雷蒙德的回答

Bootstrap 2.3.2

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

Bootstrap 3

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

Bootstrap 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/#inline

Answer 5

我在bootstrap.css文件中找不到任何特定内容.所以,我将css添加到自定义css文件中.

.inline li {
    display: inline;
}

Answer 6

我很惊讶,list-inline没有在bootstrap 4中工作,最后我在bootstrap 4文档中得到它.

Bootstrap 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/#inline