Break Bootstrap Columns

-1

I am making a structure with bootstrap , according to the "laws" of bootstrap one must use col-xs-12 col-md-12 I am making 2 main columns with columns inside, example:

EXAMPLE CODEPEN

The column on the right has columns with col-xs-12 col-md-6 , only one is larger than the other, so that there are not 2 columns on the same line, what could be wrong?

<div class="container">
  <div class="row">
<div class="col-md-2 borda">
  <div class="col-xs-12 col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        Titulo
      </div>
      <div class="panel-body">
        CONTEUDO
      </div>
    </div>
  </div>
</div>
<div class="col-md-8 borda">
  <div class="row">

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          Titulo
        </div>
        <div class="panel-body">
          <p>CONTEUDO</p>
          <p>CONTEUDO</p>
          <p>CONTEUDO</p>
          <p>CONTEUDO</p>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          Titulo
        </div>
        <div class="panel-body">
          <p>CONTEUDO</p>
          <p>CONTEUDO</p>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          Titulo
        </div>
        <div class="panel-body">
          Conteudo
        </div>
      </div>
    </div>

</div>

  </div>
</div>
    
asked by anonymous 11.01.2016 / 13:14

3 answers

2

Since you do not want to use the row class to group the rows, the more correct you are to assign a height to the divs of the right column.

<div class="col-md-6 minhaDiv></div>

.minhaDiv {
    height:250px;
}

Edited:

To get a more harmonic layout, you can apply the height property to the panel class, the result will be the same, and the look looks better as requested in the comments.

<div class="col-md-6>
    <div class="panel">...</div>
</div>

.panel {
    height:250px;
}

See: link

Or, an alternative since you are using and will enter the divs via jQuery , you would get the highest height from the divs to be displayed and apply it to all the others by a .css() .

    
11.01.2016 / 13:49
0

I see 3 situations in your HTML:

1) The sum of the columns of the first "layer" of columns is less than 12.

<div class="container">
  <div class="row">
    <!-- a primeira poderia ser 'col-md-4' -->
    <div class="col-md-2 borda"> ... </div> 
    <div class="col-md-8 borda"> ... </div>
  </div>
</div>

2) The content of the first column you divided into more columns, but did not nest with a row :

<div class="col-md-2 borda">
<!-- Aqui deveria ter um div row -->
  <div class="col-md-6"> ... </div>
  <div class="col-md-6"> ... </div>
<!-- Aqui deveria ter um div row -->
</div>

3) The content of the first column you have divided into more columns, but the sum is greater than 12.

<div class="col-md-8 borda">
  <div class="row">
    <div class="col-md-6"> ... </div>
    <div class="col-md-6"> ... </div>
    <div class="col-md-6"> ... </div>
  </div>
</div>

See if it's not this configuration combination that is hindering the proper functioning of the Boostrap Grid System .

    
11.01.2016 / 13:51
-1

You only need to create a row parent and two row daughters within it. This defines that within a row (with X columns) you will have two more rows inside.

Here's an example:

<div class="container">
   <div class="row">
      <div class="col-sm-6">
         <div id="linha1" class="row">
            <div class="col-sm-12">
               <!-- Content -->
            </div>
         </div>
         <div id="linha2" class="row">
            <div class="col-sm-12">
               <!-- Content -->
            </div>
         </div>
      </div> 

      <div class="col-sm-6">
         <!-- Content -->
      </div>
   </div>
</div>

If you'd like to see this code working, go to DEMO .

    
11.01.2016 / 13:50