Non capisco twitter bootstrap span e riga

Question

Ero un enorme utente di sistema a griglia 960, e ho pensato di provare Twitter Bootstrap, ma forse è una domanda stupida e puoi ridere e non votare, ma il fatto è Non capisco lo span e la riga.

Quindi il mio problema è, quando creo un contenitore, e creare campate all'interno di esso, non si adatta l'uno accanto all'altro in modo corretto:

Come in 960gs se scrivo la seguente

<div class="container_12"> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
</div> 

Ottengo una perfetta colonna 3 una accanto all'altra.

Ma non riesco a raggiungere questo con Twitter Bootstrap, non importa quello che faccio, finisco sempre con colonne sproporzionate, quindi le colonne non riempiono il contenitore come avrebbe dovuto, come con 960gs. Se metto 3 colonne, il margine a destra non è corretto o non si adatta correttamente nel contenitore.

bootstarp esempio:

<div class="container"> 
    <div class="row"> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
    </div> 
</div> 

Quindi, nell'esempio di cui sopra, io alla fine con colonne sproporzionati, non v'è alcun margine nella prima colonna a sinistra. Se lo faccio in 960gs con le classi della griglia è perfetto.

Cosa c'è di diverso su Twitter Bootstrap rispetto a 960gs che causa il mio problema?

Answer 1

Il motivo:

• contenitore è 940px
• riga è di 960 con un margine -20px
• span4 300px con un margine di 20px

quando larghezza dello schermo è < = 940px, il -20px da riga e il margine 20px da span4 si annullano a vicenda, ecco perché il primo span4 non ha margini a sinistra.

La soluzione 'Twitter bootstrap':

Aggiungere bootstrap-responsive.css e quando lo schermo va sotto 980px e oltre 768px:

contenitore diventa 724px, 744px fila e span4 228px, mantenendo un margine sinistro sul primo span4.