Bootstrap navbar% 100 genişlik ben nav bar görüntünün üstünde olsa bile sayfadaki tam gitmek için yapmaya çalışıyorum benim önyükleme nav çubuğunda

Question

çalışmıyor.

Ama ben .navbar-wrapper ve navbar ve navbar-default genişlik 100% denedim ama nedense navbar hala sayfa genişliğini gitmeyecek.

Canlı Örnekler Burada

benim o sayfanın tam genişliğine gider böylece Full View

Soru nasıl navbar genişliği% 100 çalışması yapabilir codepen benim codepen İşte Code View

olduğunu ?

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> 

Answer 1

Sen kapsayıcı ".navbar-sarmalayıcı" dan devralan yaparak sayfanın tam uzunlukta gitmek için gezinme çubuğu genişliğini alabilir. Ayrıca aşağıdaki stilleri benim için çalıştı

".navbar .navbar-sarmalayıcı" ayarladığınız dolgu kurtulmak isteyebilirsiniz: codpen bakınız: http://codepen.io/JordanLittell/pen/wadWxv

/* Özel sınıfı.çevreleyen konteyner .navbar, yerine oturtmak için kullanılır. */

.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; 
} 

Answer 2

Derslere container-fluid yerine container kullanmalıdır.

• container

• container-fluid mevcut genişliği de

container 'in bir dolguya sahip doldurur farklı ekran boyutları (xs, SM, MD, lg) için genişlik değerleri önceden tanımlanmış uygulanan ve genellikle ters marjı olan row ile birlikte kullanılırlar.

Yani (kapsayıcınızda içinde) üst üste Navbar sarmak zorunda yatam genişliğini istiyorsanız ya da sadece hiç container 's kullanmayın.

Answer 3

Eğer .container sınıf yerine container-fluid sınıfını kullanırken görünüyor. önyükleme belgelerine gereğince:

senin dıştaki .container .container-fluid için değiştirerek tam genişlikli düzeni içine herhangi bir sabit genişlikli ızgara düzeni çevirin

.

http://getbootstrap.com/css/#grid-example-fluid

codepen güncelleme: http://codepen.io/anon/pen/gpWMzJ