Html 导航栏上的Boostrap内联选项卡？

我正在做一个关于codepen的小练习，并尝试使用boostrap设置navbar选项卡的样式，但是当我在网站上使用原始代码或添加

class="list-inline" 

它以每行上的项目结束

有人能解释为什么会这样吗？我正在使用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>

您还必须对li项使用列表内联项类

看下面的小提琴

请使用此代码，我认为它符合您的要求

在这里输入代码

<div id="exTab1" class="container">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="#youridname1" data-toggle="tab">Overview</a>
    </li>
    <li><a href="#youridname2" data-toggle="tab">Using nav-pills</a>
    </li>
  </ul>

  <div class="tab-content clearfix">
    <div class="tab-pane active" id="youridname1">
      <h3>Content's background color is the same for the tab</h3>
    </div>
    <div class="tab-pane" id="youridname1">
      <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
    </div>
  </div>
</div>

选项卡的内容背景色相同
我们使用类nav pills代替nav tabs，后者会自动为选项卡创建背景色

您可以分享您的plunkr试用版吗？

<div id="exTab1" class="container">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="#youridname1" data-toggle="tab">Overview</a>
    </li>
    <li><a href="#youridname2" data-toggle="tab">Using nav-pills</a>
    </li>
  </ul>

  <div class="tab-content clearfix">
    <div class="tab-pane active" id="youridname1">
      <h3>Content's background color is the same for the tab</h3>
    </div>
    <div class="tab-pane" id="youridname1">
      <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
    </div>
  </div>
</div>