Twitter bootstrap divide el fluido de filas por el espacio disponible

I have the following usecase.
I need to draw 6 blocks of html divs and break it down to by the available space.
The image bellow will demonstrate how is it suppose to be. Can you please have a look at this code and tell me what is the problems with my spans? http://jsfiddle.net/DWZLE/ Muchas Gracias
enter image description here

here is how the code starts:

<div class="container" style="width: 68%;">
    <div class="row-fluid">

        <div class="span4">
            <div>
                <img src="http://trialx.com/curetalk/wp-content/blogs.dir/7/files/2011/05/diseases/Globus-3-small.gif" />
            </div>
            <h3><a href="http://www.google.com">We speak your language</a></h3>
            <p>
                text text text text text text text text text text text text text text text text text text text text 
                text text text text text text text text text text text text text text text text text text text text text 
            </p> 
        </div>...

Noticias I have divided it to two rows, now, it breaks down but from 3 in a row two 1 on a row.
And, it is not centered. see here http://jsfiddle.net/DWZLE/

preguntado el 05 de mayo de 13 a las 17:05

You should add bootstrap-responsive.css to the fiddle or use bootply.com en lugar de -

2 Respuestas

You can't make it like that.

In boostrap the first element in each row, doesn't have margin-left, so that it can fit the other elements, so when you add 6 span4 the 4 element (which is the first element in the second row) will have margin-left and it will push the orher elements.

So you should make 2 rows with 3 elements in each one.

contestado el 05 de mayo de 13 a las 18:05

I dind't see anything change from the updated version, look here: jsfiddle.net/DWZLE/1 that's what I had in mind. - goteo

I changed the link. anyway, in your code, it breaks down from 3 to on and not from 3 to 2 and than one (like my image). and it is not centered. Thanks - yos mishan

Yep that is normal when you use fluid rows, since the elements have calculated widths in % it won't break at all, if you want them to brake you should use normal ".row", not ".fluid-row". - goteo

hmmm... .row has some bad behavior, the rows are jumping up and down when I shrink the screen, I should check for another framework... Thanks - yos mishan

For mobile and tablet can you import bootstrap-responsive.css - Sakir SEN

I agree with drip. Fine explained.

Tu puedes hacerlo.

One Row. (Max span count 12)
<div class="row-fluid">
   <div class="span4">
      ...
   </div
   <div class="span4">
      ...
   </div
   <div class="span4">
      ...
   </div
</div>

Two Row
<div class="row-fluid">
   ...
</div>

contestado el 05 de mayo de 13 a las 18:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.