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>

Source

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

Answer 4

完成Raymond的回答

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

Answer 7

此解决方案使用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; }

Answer 8

内联实际上并不是我们可能需要的内联 - 即显示：内联

Bootstrap inline，因为我的观察者更像是水平方向

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

display: inline; added to the UL

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

注意//添加到样式表

Answer 9

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

<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;
}

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

9 个答案: