Sono sicuro che potrebbe essere semplice ma non l'ho ancora capito.Contenitore fluido Bootstrap 3 con contenuto centrato
Come si crea un contenitore del fluido a schermo intero e il contenuto, inclusa la navigazione, deve essere centrato sulla pagina, come in un contenitore non fluido?
Sto solo cercando di ottenere lo sfondo nav/intestazione superiore per allungare la pagina mantenendo il contenuto a una larghezza fissa.
È possibile circondare il .container con i contenuti di navigazione con un altro <div> su cui si aggiunge lo stile di sfondo. Vedere il seguente esempio:
.background {
background-color: #f99;
}
.content {
background-color: #9f9;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="background">
<div class="container">
<div class="row">
<div class="col-xs-12 content">Content</div>
</div>
</div>
</div>Procedimento grezzo è utilizzare il concetto griglia Bootstrap. Bootstrap divide la tua riga in 12 colonne. Il trucco consiste nell'inserimento di un blocco di 4 spazi neri prima e uno dopo il blocco di 4 spazi. Esempio:
<div class="container-fluid">
\t <div class="row">
\t \t <div class="col-sm-4"></div>
\t \t <div class="col-sm-4">
\t \t \t <h2>Title</h2>
\t \t \t <p>Your content here</p>
\t \t </div>
\t \t <div class="col-sm-4"></div>
\t </div>
</div>
Grazie per la risposta, ma se c'è un'immagine di sfondo e io voglio che sia proseguita in background, ma il resto del contenuto rimane lo stesso? –
Ho paura di non comprendere completamente la tua domanda. Ad esempio, l'immagine di sfondo è più alta del tuo contenuto e la parte inferiore viene tagliata. O vuoi ad esempio un'immagine di sfondo a tutta altezza? – ckuijjer