Twitter Bootstrap CSS forma statica fluido posizionamento

Question

sto utilizzando il framework Twitter Bootstrap cercando di ottenere un layout simile a questo:

Questo è come appare ora:

Current layout http://f.cl.ly/items/1n3y0F1I3D282g2U1J3Z/Screen%20Shot%202012-07-28%20at%209.09.10%20PM.png

jsFiddle fullscreen

jsFiddle

La larghezza del contenitore modulo cambia in base alla larghezza del browser (le media-query CSS di Twitter Bootstrap). Le icone-box hanno sempre una larghezza di 14px.

Ho provato diverse cose in base ai layout CSS a larghezza statica/side-side/fluid-content per cercare di riempire la larghezza di input del testo.

Penso che la mia unica opzione sia creare le mie query multimediali CSS che definiscono una larghezza assoluta per l'input di testo.

Answer 1

Come con molti framework CSS, devi stare molto attento con padding. Prendere questa via

.patch-well { 
    padding: 20px; 
} 

Answer 2

bootstrap consente anche di simulare larghezze minime per gli oggetti da non dover apportare tutto il fluido layout. Nel tuo caso, puoi provare a rendere l'intervallo di wrapper e riga per quella nav non essere fluido.

Answer 3

Si inserisce l'intero modulo in span3, è circa il 25% della larghezza della riga. Pertanto, se la risoluzione è grande, span3 non è sufficiente per contenere l'intera forma. Con risoluzioni minori, la larghezza di span3 diventa 100% e le risoluzioni piccole sono buone. Usa solo qualche altra classe di span e calcola attentamente i numeri nelle classi di estensione. Like here Inoltre, preferisco usare la classe fluid-row invece della classe row, è più facile manipolarla con la larghezza.

Utilizzare sempre struttura come questa

<div class="row-fluid"> 
    <div class"span3"> 
    <!-- content1 --> 
    </div> 
    <div class"span9"> 
    <div class="row-fluid"> 
     <div class="span6"> 
      <!-- content2 --> 
     </div 
     <div class="span6"> 
      <!-- content3 --> 
     </div 
    </div> 
    </div> 
</div> 

noti che sempre se voglio nuova linea nel disegno, senza galleggiante, e se voglio 100% della larghezza dell'elemento od genitore, userò fila fluido. Poiché gli elementi figli possono essere di nuovo elementi di espansione, la somma dei 12. In questo esempio, "content1" utilizzerà il 25% della larghezza in grandi risoluzioni, ma in risoluzioni ridotte avrà una larghezza del 100%. In grandi risoluzioni, "content2" e "content3" avranno il 100% della larghezza dei genitori, ma questo è il 75% della larghezza del contenitore. In piccole risoluzioni, tutte le classi di span avranno una larghezza del 100%. Se non lo desideri, in alcuni casi, sostituisci il css di bootstrap predefinito con le tue classi.

Spero che tu capisca qual è il mio punto. Ci scusiamo per il mio inglese :)

Answer 4

Questo è quello che vuoi http://jsfiddle.net/YxKfc/14/, Si prega di controllare.