我想用Bootstrap内联显示一个列表。是否有一个类我可以添加从Bootstrap来实现这一点?


当前回答

根据Bootstrap文档2.3.2和3,类应该这样定义:

2.3.2引导

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

引导3

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

其他回答

来完成雷蒙德的回答

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/内联

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/内联

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

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

来源:https://getbootstrap.com/docs/5.0/components/list-group/水平 和https://getbootstrap.com/docs/5.2/components/list-group/ #水平

根据Bootstrap文档2.3.2和3,类应该这样定义:

2.3.2引导

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

引导3

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

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

.inline li {
    display: inline;
}

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