自舉導航欄100％寬度不起作用

在我的自舉導航欄上，即使在導航欄位於圖像頂部時，我也嘗試使用頁面完整版。自舉導航欄100％寬度不起作用

但我已經試過.navbar-wrapper和navbar和navbar-default上的寬度爲100％但由於某種原因，導航欄仍然不會全部顯示頁面寬度。

活生生的實例

這裏是我的codepen Code View

這裏是我的codepen Full View

問題我怎樣才能讓我的導航欄寬度100％的工作，所以它轉到頁的全寬？

CSS

/* Special class on .container surrounding .navbar, used for positioning it into place. */ 
.navbar-wrapper { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 100% !important; 
    left: 0; 
    z-index: 20; 
} 

/* Flip around the padding for proper display in narrow viewports */ 
.navbar-wrapper > .container { 
    padding-right: 0; 
    padding-left: 0; 
} 

.navbar-wrapper .navbar { 
    padding-right: 15px; 
    padding-left: 15px; 
    width: 100% !important; 
} 

.navbar-inverse { 
    width: 100% !important; 
    background-color: rgba(0, 0, 0, 0.5) !important; 
} 

.navbar-inverse .nav > li > a { 
    color: #FFFFFF; 
} 

.navbar-inverse .nav > li > a:hover { 
    background: none; 
} 

.navbar-brand a { 
    color: #FFFFFF; 
} 

.main-header-background { 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-image: url('./images/stars/img-stars-2.jpg'); 
    height: 620px; 
    width: 100%; 
    margin-bottom: 60px; 
}

HTML

<div class="navbar-wrapper"> 
<div class="container"> 

<nav class="navbar navbar-inverse"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<div class="navbar-brand"> 
<a href="#">Brand</a> 
</div> 
</div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

<ul class="nav navbar-nav"> 
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
<li><a href="#">Link</a></li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></li> 
<li class="divider"></li> 
<li><a href="#">Separated link</a></li> 
<li class="divider"></li> 
<li><a href="#">One more separated link</a></li> 
</ul> 
</li> 
</ul> 

<ul class="nav navbar-nav navbar-right"> 
<li><a href="#">Link</a></li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></li> 
<li class="divider"></li> 
<li><a href="#">Separated link</a></li> 
</ul> 
</li> 
</ul> 

</div><!-- /.navbar-collapse --> 
</nav> 
</div> 
</div> 

<div class="main-header-background"> 
</div>

來源

2015-06-06 user4419336

你要嗎？ http://codepen.io/anon/pen/GJmqdL –

@KhanhTO它的工作是我之後的工作。你可以把它作爲答案並解釋你做了什麼。 – user4419336

它應與下面類似的回答，轉換到'容器fluid'，並且設置0至填充左和右：'.navbar-包裝> .container流體{ \t填充右：0; \t填充左：0; }'。我不確定我是否應該發佈答案 –

你可以讓導航欄的寬度，通過將容器從「.navbar-包裝」繼承去的頁面的全長。你也可以想擺脫你在「.navbar-包裝.navbar」

以下樣式爲我工作設置填充：見codpen：http://codepen.io/JordanLittell/pen/wadWxv

/*特種類。圍繞.navbar的容器，用於將其定位。 */

.navbar-wrapper { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 100% !important; 
    left: 0; 
    z-index: 20; 
} 

/* Flip around the padding for proper display in narrow viewports */ 
.navbar-wrapper > .container { 
    padding-right: 0; 
    padding-left: 0; 
    width: inherit; 
} 

.navbar-wrapper .navbar { 
    width: 100% !important; 
} 

.navbar-inverse { 
    width: 100% !important; 
    background-color: rgba(0, 0, 0, 0.5) !important; 
    border-radius: 0; 
} 

.navbar-inverse .nav > li > a { 
    color: #FFFFFF; 
} 

.navbar-inverse .nav > li > a:hover { 
    background: none; 
} 

.navbar-brand a { 
    color: #FFFFFF; 
} 

.main-header-background { 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-image: url('http://www.riwakawebsitedesigns.com/external/images/stars/img-stars-2.jpg'); 
    height: 620px; 
    width: 100%; 
    margin-bottom: 60px; 
}

來源

2015-06-06 08:51:59 user2977636