Column offset in bootstrap

Question

Column offset in bootstrap

Asked 9 years, 3 months ago

Viewed 677 times

0

I’m putting together a code for columnar a list of products.

Each row has 4 columns and jumps to the next row.

But when, for example, the height of the first column is greater than the others and I resize the window, the first column of the second row, moves forward.

Below is an excerpt from the code. Can anyone help me?

<% Do While not rs.Eof
   <div class="col-md-3 col-xs-6" align="center">
       <div class="col-lg-12" align="center">
          <img src="images/produto/nome.jpg" class="img-rounded img-responsive">
       </div>
       <div class="col-lg-12 size-font-10-normal" align="center">Titulo</div>
       <div class="col-lg-12 size-font-09-bold" align="center">Valor</div>
   </div>
<% rs.MoveNext
Loop %>

Imagem de Exemplo

If you always have 4 columns you could use a "clear" in the first item of each row. See if any of this helps: http://answall.com/a/16897/70 or even http://answall.com/q/42714/70

– Bacco

2015/03/18 at 22:36
1

Use source code instead of images, depending on image quality, can make it difficult to view source code.

– Julio Borges

2015/03/19 at 13:49
Every time this question goes to the front of the queue gives me a pain just reading the title. Column displacement must hurt like hell.

– Bacco

2016/06/29 at 21:17

1 answer

Browser other questions tagged html twitter-bootstrap

You are not signed in. Login or sign up in order to post.

by David Costa • **393** points · Answer 1 · 2015-03-28T13:18:54+00:00

Create a Class css for the items, and set a height for those items.

Of this

<div class="col-md-3 col-xs-6" align="center">
   <div class="col-lg-12" align="center">
      <img src="images/produto/nome.jpg" class="img-rounded img-responsive">
   </div>
   <div class="col-lg-12 size-font-10-normal" align="center">Titulo</div>
   <div class="col-lg-12 size-font-09-bold" align="center">Valor</div>
</div>

Switch to that:

<div class="col-md-3 col-xs-6 item" align="center">
    <div class="col-lg-12" align="center">
        <img src="images/produto/nome.jpg" class="img-rounded img-responsive">
   </div>
   <div class="col-lg-12 size-font-10-normal" align="center">Titulo</div>
   <div class="col-lg-12 size-font-09-bold" align="center">Valor</div>
</div>

In your page css files add this Stylo

.item{
  height : 130px; /*leve em consideração o tamanho que você acha adequado*/
}