Bootstrap navbar larghezza 100% non funzionante

Question

Nella mia barra di navigazione bootstrap sto cercando di andare al massimo con sulla pagina anche quando la barra di navigazione è sopra l'immagine.

Ma ho provato larghezza 100% su .navbar-wrapper e navbar e navbar-default Ma per qualche motivo la barra di navigazione non andrà ancora a tutta larghezza della pagina.

Esempi live

Ecco il mio codepen Code View

Ecco il mio codepen Full View

Domanda Come posso fare la mia larghezza barra di navigazione lavoro di 100% così si va a tutta la larghezza della pagina ?

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

si potrebbe ottenere la larghezza della barra di navigazione per andare tutta la lunghezza della pagina, rendendo il contenitore eredita da ".navbar-wrapper". Si consiglia inoltre di sbarazzarsi dell'imbottitura è stato impostato in ".navbar-wrapper .navbar"

i seguenti stili lavorato per me: Vedere codpen: http://codepen.io/JordanLittell/pen/wadWxv

/* Categoria speciale su.contenitore che circonda .navbar, utilizzato per posizionarlo in posizione. */

.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

Si dovrebbe utilizzare la classe container-fluid invece di container.

• container ha predefinito valori di larghezza per le diverse dimensioni dello schermo (xs, sm, md, lg)

• container-fluid riempie la larghezza disponibile

anche container 's hanno qualche imbottitura applicato, e generalmente sono usati in congiunzione con row che hanno il margine inverso.

Quindi, se volete di grande ampiezza hai per avvolgere il vostro barra di navigazione in una fila (all'interno del contenitore) o semplicemente non usare container 's affatto.

Answer 3

Sembra che si stia utilizzando la classe .container anziché la classe container-fluid. Come da documentazione di bootstrap:

trasformare qualsiasi dimensione fissa layout a griglia in un layout di grande ampiezza modificando tua più esterno .container-.container-fluid.

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

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