html – Bootstrap导航条列表是堆叠而不是旁边

前端之家收集整理的这篇文章主要介绍了html – Bootstrap导航条列表是堆叠而不是旁边前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试执行一个基本的Bootstrap导航栏示例:
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
</body>

看看CodePen中发生了什么(安装了Bootstrap).为什么导航栏中的项目彼此堆叠在一起,而不是彼此并排?

解决方法

您正在使用Bootstrap 4(在Codepen中)并且导航栏已更改.如果你想要一个简单的水平(非折叠),你需要包含navbar-toggleable-xl,因为导航栏默认是垂直堆叠的.

4.0.0 navbar-toggleable- *的更新已更改为navbar-expand- *

原始问题:

<nav class="navbar navbar-light navbar-toggleable-xl bg-faded">
    <a href="/" class="navbar-brand">Brand</a>
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
</nav>

演示:http://www.codeply.com/go/TVDW57B4SL

Read more in the docs

原文链接:https://www.f2er.com/html/225830.html

猜你在找的HTML相关文章