Bootstrap导航栏列表被堆叠而不是并排放置

RubyNoob

我正在尝试执行基本的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

在文档中阅读更多内容

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章