Question

我在Wordpress中使用Bootstrap 4。出于某种原因，我无法仅使用列表中的类.list-inline来内联（水平）显示列表项，如下所示：

<ul id="dances" class="list-unstyled list-inline">
    <li>Plena</li>
    <li>Danza</li>
    <li>Bomba</li>
</ul>

只有当我将类.list-inline-item单独放在实际列表项上时才有效，如下所示，这似乎是多余的：

<ul id="animals" class="list-unstyled">
    <li class="list-inline-item">Giraffes</li>
    <li class="list-inline-item">Elephants</li>
    <li class="list-inline-item">Donkeys</li>
</ul>

我是Bootstrap的新手，我无法回想起我找到班级.list-inline-item的位置，因为我无法在任何地方的Bootstrap 4班级列表中找到它。例如，在此cheatsheet。

这是我的fiddle，因此您可以更好地了解它。

（请在广泛的浏览器中查看小提琴。）

注意＆＃34; Animals＆＃34;黄色列表水平显示，但＆＃34; Dances＆＃34;在粉红色不。这是为什么？

Answer 1

Bootstrap 4

显示内嵌列表：http://v4-alpha.getbootstrap.com/content/typography/#inline

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

如上所述：https://getbootstrap.com/docs/3.3/css/#inline，您必须使用display: inline-block;将列表内联。（list-inline的{{3}}正在使用type.less，其中提供了每个li元素display: inline-block;）。

Answer 2

除了Bootstrap如何工作之外，如果您不想在每个项目上单独列出list-inline-item，您可以定义父样式以按您的方式运行：

.list-inline{text-align:center}
.list-inline li{display:inline-block;margin:5px;}

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

由Bootstrap 4 .list-inline类与.list-inline-item类混淆

2 个答案: