Contenitore BootStrap 3 all’interno del contenitore-fluido

Di seguito è riportato il layout su cui sto lavorando utilizzando BootStrap3. Ho un esempio di installazione con layout limitato per questa domanda su http://jsfiddle.net/s7Rwj/4

Layout del sito Web

Sto avendo difficoltà a impostare la mia intestazione. Sto usando la larghezza del fluido del contenitore, quindi la larghezza della mia intestazione è al 100%, tuttavia la domanda è che tra tre elementi all’interno dell’intestazione si dovrebbe rimanere a sinistra e il resto dei due deve corrispondere rispettivamente a sinistra ea destra del “contenitore” sottostante.

Finora ho provato vari layout ma di seguito è l’unico che è vicino a quello che sto cercando.

 

Tuttavia, la sfida con questo layout è che poiché lo span sta usando la posizione assoluta quando il browser viene ridimensionato, il testo si sovrappone al secondo elemento all’interno dell’intestazione. Ho già provato a fornire una larghezza esplicita ma non ha aiutato.

Se non utilizzo la posizione assoluta, lo span e il resto degli elementi vengono visualizzati in due righe diverse.

Sto cercando consigli su come configurare questa intestazione.

PS: ho aggiunto colors di sfondo casuali al tag div per capire dove vengono visualizzati i rendering. Sentiti libero di ignorarli.

Penso che tu stia cercando difficoltà dove non lo sono.

Evitare i contenitori di nidificazione (.container e .container-fluid) perché non sono nidificabili a causa del loro riempimento, ecc … guarda la panoramica dei contenitori Bootstrap 3

Inoltre, quando stai nidificando le colonne, tutto ciò che devi fare è mettere una nuova riga in una delle tue colonne e inserire le colonne annidate direttamente in essa. Vedi il sistema Grid Bootstrap 3 – colonne di nidificazione , ecco il loro esempio:

 
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6

La soluzione che stai cercando con il tuo layout è molto semplice. Non è necessario necessariamente il fluido del contenitore nell’intestazione. È sufficiente creare un contenitore per la parte centrale sopra la giostra e avvolgerlo in un involucro o in qualsiasi altra class che si possa modellare con la larghezza: 100%. Inoltre, è ansible aggiungere un po ‘di riempimento che ha il contenitore liquido.

  

E da qualche parte nel tuo CSS (ti consiglio style.less), puoi dare uno stile .wrap al 100% della larghezza, anche se dovrebbe essere la larghezza predefinita per ogni div senza stili.

 .wrap { width: 100%; } 

So che questa domanda è un po ‘più vecchia ma non importa. Spero di aver capito correttamente la tua domanda.

In realtà non vedo alcun problema con l’utilizzo del contenitore Bootstrap annidato nel container-fluid. L’ho fatto di recente in un tema che ho creato che utilizza un generatore di pagine. Ciò ha consentito al client di creare facilmente pagine con righe variabili e a larghezza intera diverse utilizzando il generatore di pagine.

Aggiungi qualcosa di simile al tuo foglio di stile:

 .container-fluid .container { padding-left:0; padding-right:0; } 

Detto questo, penso che ciò che stai tentando possa essere risolto aggiungendo un po ‘di padding-top alla prima colonna nel container-fluid. Per renderlo specifico per dispositivi mobili, aggiungi il riempimento in una query multimediale nel punto di interruzione in cui il testo inizia a sovrapporsi. Questo non è il modo più bello di farlo, ma è così che mi avvicinerei a ciò che stai cercando di realizzare.

  

LINK: http://jsfiddle.net/udLbLwh6/

Credo che i contenitori di nidificazione siano perfetti. Finché rimuovi il padding sul .container all’interno di .container-fluid (.container-fluid .container {padding: 0;}), allora che altro non va bene?