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

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

引导程序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/#inline

更新了链接https://getbootstrap.com/docs/4.4/content/typography/#inline

根据2.3.2和3的Bootstrap文档，应按以下方式定义类：

引导程序2.3.2

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

引导程序3

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

尽管TheBrent的回答总体上是正确的，但并未回答如何以官方引导方式进行回答。引导程序的标记很简单：

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

资源

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

完成雷蒙德的答案

引导程序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/#inline

我在bootstrap.css文件中找不到任何特定的内容。因此，我将css添加到自定义css文件中。

.inline li {
    display: inline;
}

我很惊讶，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

此解决方案使用Bootstrap v2，但在TBS3中为INLINE类。我还没有弄清楚在TBS3中什么是等效类（如果有的话）。

这位先生写了一篇很好的文章，介绍了v2和v3之间的区别。

http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/

编辑-使用CSS定位li元素以解决您的问题，如下所示

    { display: inline-block; }

就我而言，我的目标是UL，而不是LI

    nav ul li { display: inline-block; }

内联实际上不是我们可能需要的内联-即display：inline

就我观察者而言，Bootstrap内联更多地是水平方向

要显示与其他元素内联的列表，我们需要

display: inline; added to the UL

<ul class="unstyled inline" style="display:inline">

NB //添加到样式表

根据Bootstrap文档，您需要将“内联”类添加到列表中。像这样：

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

但是，这不起作用，因为在Bootstrap CSS文件中似乎缺少一些CSS，涉及到“ inline”类。因此，另外，将以下行添加到CSS文件中以使其工作：

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