Bootstrap 4 beta列高度与导航重叠

我正在使用Bootstrap Beta 4，我发现nav与我的列div重叠，我可能在这里做了错误吗？Bootstrap 4 beta列高度与导航重叠

<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>

来源

2017-09-25 RichardKang

如果您从nav元素删除类fixed-top将停止重叠。

<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元素的位置。（这样你就不必从nav删除fixed-top类）

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

希望这有助于:-)

来源

2017-09-28 00:02:32

Bootstrap 4 beta列高度与导航重叠

回答

相关问题