twitter-bootstrap - 如何使用 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

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

Bootstrap 5.x

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

来源:https://getbootstrap.com/docs/5.0/components/list-group/#horizontal并且:https://getbootstrap.com/docs/5.2/components/list-group/#horizontal