Pasek nawigacji Bootstrap 100% szerokość nie działa

Question

Na pasku nawigacyjnym bootstrap próbuję przejść do pełnej wersji na stronie, nawet gdy pasek nawigacji znajduje się na górze obrazu.

Ale wypróbowałem szerokość 100% na .navbar-wrapper i navbar i navbar-default Jednak z jakiegoś powodu navbar nadal nie będzie miał pełnej szerokości strony.

żywo Przykłady

Oto moja codepen Code View

Tu jest moja codepen Full View

Pytanie Jak mogę uczynić moją szerokość navbar 100% prac, tak to idzie na całą szerokość strony ?

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

Można dostać szerokość paska nawigacyjnego, aby przejść przez całą długość strony poprzez pojemnik dziedziczą „.navbar-wrapper”. Można też pozbyć padding masz ustawionej w pozycji „.navbar-wrapper .navbar”

następujące style pracował dla mnie: Zobacz codpen: http://codepen.io/JordanLittell/pen/wadWxv

/* klasa specjalna na.pojemnik otaczający .navbar, używany do pozycjonowania go na miejscu. */

.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

Należy użyć klasy container-fluid zamiast container.

• container ma predefiniowane wartości szerokości dla różnych rozmiarów ekranu (xs, SM, MD, lg)

• container-fluid wypełniającej dostępna szerokość

także container jest pewne wyściółkę stosowane i na ogół są używane w połączeniu z row, które mają odwrotny margines.

Jeśli chcesz pełnej szerokości, musisz zawinąć pasek nawigacyjny z rzędu (wewnątrz kontenera) lub po prostu nie używać w ogóle container.

Answer 3

Wygląda na to, że używasz klasy .container zamiast klasy container-fluid. Zgodnie z dokumentacją bootstrap:

Zamień dowolny układ o stałej szerokości siatki do pełnej szerokości układ zmieniając swój oddalonych .container do .container-fluid.

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

aktualizacja codepen: http://codepen.io/anon/pen/gpWMzJ