html - 如何使用 Bootstrap 制作水平导航栏？

Question

我有这个简单的 HTML 代码，使用 Bootstrap 类来创建导航栏。我希望我的导航栏是水平的，所以我添加了 navbar-inverse 类。但是，我的导航栏一直显示为垂直，即使我尝试了不同的方法来修复它，我也不知道为什么会这样。

<div class="blog-masthead">
  <div class="container">
    <nav class="navbar navbar-inverse">
      <ul class="nav navbar-nav">
        <li class="nav-item"><a class="blog-nav-item active" href="#">Home</a></li>
        <li class="nav-item"><a class="blog-nav-item" href="#">New features</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="nav-item"><a class="blog-nav-item" href="#">{{ Auth::user()->name }}</a></li>
      </ul>
    </nav>
  </div>
</div>

Answer 1

我希望 navbar-inverse 与菜单 View 样式无关 我希望它用于更改菜单文本的颜色，对于 View 样式，您应该在标签中使用 nav-link 并在 nav 标签中使用 nav-toggleable I希望这是答案。

如果我误解了你的问题，我很抱歉

               <ul class="nav navbar-nav ">
                 <li class="nav-item">
                   <a class="nav-link  active" href="#">Home</a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link " href="#">New features</a>
                 </li>

               </ul>

               <ul class="nav navbar-nav navbar-right">
                 <li class="nav-item"><a class="nav-item" href="#">{{ Auth::user()->name }}</a></li>
               </ul>

         </nav>
     </div>