html - 导航栏上的 Bootstrap 内联选项卡？

Question

我正在 codepen 上做一些练习，并尝试使用 boostrap 设置导航栏选项卡的样式，但是当我使用网站上的原始代码或添加时

class="list-inline" 

它以每一行的元素结束 like this .

谁能解释为什么会这样？我正在使用 boostrap 4，这是我的代码:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">Brand</a>
   </div>
    <ul class="list-inline">
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
</nav>

Answer 1

您还必须对 li 项使用 list-inline-item 类。

请看下面的 fiddle

https://jsfiddle.net/pr6t58wL/

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <a href="#" class="navbar-brand">Brand</a>
  </div>
  <ul class="list-inline">
    <li class="list-inline-item"><a href="#">Home</a></li>
    <li class="list-inline-item"><a href="#">Menu 1</a></li>
    <li class="list-inline-item"><a href="#">Menu 2</a></li>
    <li class="list-inline-item"><a href="#">Menu 3</a></li>
  </ul>
</nav>