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

【问题标题】：How to display a list inline using Twitter's Bootstrap如何使用 Twitter 的 Bootstrap 显示内联列表
【发布时间】：2021-10-08 16:03:34
【问题描述】：

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

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

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

【讨论】：

最佳答案，因为提供所有可用版本的解决方案！谢谢老哥！
为什么它会随着时间的推移变得更多冗长？ Bootstrap 没有意识到它们的运行方向与简单性相反吗？
@PavelKomarov 我想很少有人会在意简洁或优雅，否则为什么 Bootstrap 会如此流行，而 Semantic UI 却濒临灭绝？
@iconoclast 作为一个主要是后端的人，仍然需要搞乱前端，答案对我来说似乎很明显 - 对于基本需求，我可以更快、更轻松地启动和运行它而无需投入太多时间来学习基础知识以帮助我入门。

【解决方案2】：

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

引导程序 2.3.2

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

引导程序 3

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

【讨论】：

【解决方案3】：

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

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

Source

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

【讨论】：

@coneybeare 由于某种原因它不起作用。 TheBrent 解决方案运行良好 :)
也许您使用的是旧版本的引导程序。引导文档清楚地表明这是标记。
Coneybeares 解决方案是引导程序特定版本，并回答了所提出的问题。但是，它是网络，一切都不像我们想要的那样黑白分明，所以无论哪种解决方案都能节省您的时间，这就是我会使用的解决方案。如果一个不起作用，请尝试另一个并继续。
@coneybeare 解决方案只是 bootstrap2 解决方案，这就是为什么不起作用，仅此而已！

【解决方案4】：

完成雷蒙德的回答

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

【讨论】：

看起来，越来越长了。
引导程序 7

【解决方案5】：

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

.inline li {
    display: inline;
}

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案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; }

【讨论】：

【解决方案8】：

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>

【讨论】：

【解决方案9】：

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

据我观察，引导内联更像是水平方向

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

display: inline; added to the UL

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

NB// 添加到样式表

【讨论】：

【解决方案10】：

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

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

【讨论】：