Navbar不是全宽在引导3

问题描述：

我想创建一个在引导100％宽度的导航栏，但它不工作。Navbar不是全宽在引导3

<div class="container-fluid"> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> WebsiteName </a> 
     </div> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </nav> 
</div>

从外面去除'container-fluid'类，你已经在里面加了'container'。 'container-fluid'有填充 – XYZ

我想创建一个投资组合网页。如果我删除容器流体，我的网页将如何响应？ –

对于navbar.put continer流体，您不需要容器流体用于其余的内容。或者使用css – XYZ

答

删除容器流体中的填充，创建类“custom-nav-container”来覆盖。

<div class="container-fluid custom-nav-container"> 
     <nav class="navbar navbar-inverse navbar-static-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="#"> WebsiteName </a> 
       </div> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Portfolio</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 

.custom-nav-container{ 
padding-left: 0px !important; 
padding-right: 0px !important; 
}

答

更换

<div class="container-">

要

<div class="container-fluid">

里面的标签。你的问题解决了。谢谢。

答

.container对于bootstrap（xs，sm，md，lg）中的每个屏幕尺寸都有一个固定宽度。它响应迅速;但是，它是根据屏幕尺寸固定的。 。容器流体扩大以填充可用宽度。如果您使用容器流体并调整浏览器大小，则可能会注意到其中的内容会随每个像素进行调整以获取完整的可用宽度。

<div class="container"> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> WebsiteName </a> 
      </div> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
</div>

Navbar不是全宽在引导3

相关推荐