Column offset in bootstrap

Question

Column offset in bootstrap

Navigation

#1 by (1 votes)

0

I'm building 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 of 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 %>

html twitter-bootstrap

asked by anonymous 18.03.2015 / 23:27

1 answer

Difficulty in visualizing data in a web project VRaptor How to create a "Reader Mode" with PHP?

score 1 · Answer 1

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

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 this:

<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 css files page add this stylo

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