246

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

4

10 回答 10

589

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

于 2013-09-01T22:30:15.417 回答
58

根据 2.3.2 和 3 的 Bootstrap 文档，该类应该这样定义：

引导程序 2.3.2

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

引导程序 3

<ul class="list-inline">
  <li>...</li>
</ul>
于 2013-10-28T03:51:41.047 回答
43

虽然 TheBrent 的回答总体上是正确的，但它并没有回答如何以官方引导方式进行操作的问题。bootstrap 的标记很简单：

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

来源

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

于 2012-12-23T00:48:24.780 回答
34

完成雷蒙德的回答

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

于 2016-07-29T13:59:33.730 回答
15

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

.inline li {
    display: inline;
}
于 2012-06-05T23:40:40.893 回答
9

我很惊讶，list-inline 在 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/#inline

于 2016-10-12T10:03:19.437 回答
1

该解决方案使用 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; }
于 2013-08-28T06:58:52.710 回答
0

引导程序 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>
于 2021-10-08T08:03:34.533 回答
-2

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

就我观察者而言，Bootstrap inline 更像是水平方向

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

display: inline; added to the UL

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

注意 // 添加到样式表

于 2013-02-16T14:31:40.057 回答
-2

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

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

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

ul.inline > li, ol.inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
于 2013-04-16T13:38:50.020 回答