我惊讶，列表内联不是在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/内联

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

.inline li {
    display: inline;
}

来完成雷蒙德的回答

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

虽然TheBrent的答案总体上是正确的，但它并没有回答如何以官方引导方式做到这一点的问题。bootstrap的标记很简单:

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

源

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

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

Bootstrap内联到目前为止，我的观察者是一个水平方向

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

display: inline; added to the UL

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

NB//添加到样式表

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