Bootstrap4中.list-inline与.list-inline-item类差异及WordPress使用问题

嘿，作为Bootstrap新手碰到这个问题太正常啦，我来给你掰扯清楚为啥会这样～

核心原因：Bootstrap 3 vs Bootstrap 4 的用法变更 #

你之前可能隐约记得Bootstrap 3里只要给<ul>加.list-inline就能让列表项水平排列，但Bootstrap 4对这个样式做了拆分优化：

• 在Bootstrap 4中，.list-inline类现在只负责重置列表的基础样式（比如移除默认的padding-left和列表项的默认符号），不再直接控制列表项的排列方式。
• 真正让<li>元素水平排列的是.list-inline-item类，它会给列表项添加display: inline-block、margin-right: .5rem等关键样式，实现横向排列。

你的代码对比说明 #

无效的写法（仅给ul加类）

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

这里的.list-inline只会移除列表的内边距和项目符号，但<li>还是默认的块级元素，所以还是垂直排列。

正确的写法（给每个li加.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>

给每个<li>添加.list-inline-item后，列表项会变成行内块元素，自然就横向排列了。这里甚至可以不用加.list-unstyled，因为.list-inline已经包含了类似的重置样式，不过一起加也没问题。

关于文档位置的小提示 #

这个.list-inline-item类其实在Bootstrap 4官方文档的「Lists」章节里的「Inline lists」部分，描述是："Use .list-inline and .list-inline-item to display list items inline." 可能你之前只看了<ul>的类，没注意到需要给每个列表项单独加类的说明，下次可以仔细看看文档里的示例代码，就能发现这个细节啦～

内容的提问来源于stack exchange，提问作者user2998925