Bootstrap导航栏列表是堆叠而不是旁边

Question

Bootstrap导航栏列表是堆叠而不是旁边

Rub*_*oob 7 html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Zim*_*Zim 4

您正在使用 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>

Run Code Online (Sandbox Code Playgroud)

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

在文档中阅读更多内容

归档时间：	8 年，11 月前
查看次数：	1736 次
最近记录：	7 年，2 月前