Question

我正在使用Bootstrap Beta 4，我发现nav与我的列div重叠，我在这里做错了什么？

<html>

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
      <a class="navbar-brand" href="#">Nav Link</a>
      <div id=navbar class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href=#>Dashboard</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="row">
      <div class="col border">
        Left panel
      </div>
      <div class="col border">
        Right panel
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

如果您从fixed-top元素中移除课程nav，则会停止重叠。

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>    
</head>    
<body>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light bg-light"><!--Removed fixed-top-->
      <a class="navbar-brand" href="#">Nav Link</a>
      <div id=navbar class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href=#>Dashboard</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="row">
      <div class="col border">
        Left panel
      </div>
      <div class="col border">
        Right panel
      </div>
    </div>
  </div>
</body>    
</html>

或者，您可以添加一些css来覆盖nav元素的位置。（这样您就不必从fixed-top）中删除nav类

<style>
   .fixed-top{
       position:relative
   }
</style>

希望这会有所帮助： - ）

Bootstrap 4 beta列高度与导航重叠

1 个答案: