Breaking Bootstrap Columns

Asked

Viewed 1,931 times

-1

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

CODEPEN EXAMPLE

the right column, has daughter columns with col-xs-12 col-md-6, only that one has a size larger than the other, making it not be 2 columns in the same row, which may be going 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>
css twitter-bootstrap bootstrap-3

  • Post the code here too, it is always recommended to post the code on the site, so that it is independent of other sites.

  • The Bootstrap is just being responsive. If it doesn’t have space below another div, it simply aligns right. And follow what Diego said and post the code inside the SOPT.

  • ready @Lucashenrique

  • I didn’t quite understand your problem.. You want the right column, which has other 3 Ivs, align the first 2 in the same row, that’s it?

  • This @Celsomtrindade in each row 2 columns, no need to use the div row pq I will insert these Divs with jQuery, ai needs to stay 2 columns per row

3 answers

2


How you don’t want to use the class row to group the lines, the correct thing is to assign a height to the divs right-hand column.

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

.minhaDiv {
    height:250px;
}

Edited:

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

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

.panel {
    height:250px;
}

Behold: http://codepen.io/anon/pen/GoEjxz?editors=110

Or, an alternative since you are using and will insert the divs via jQuery, would catch the highest height among the divs to be displayed and apply it to all others through a .css().

  • It solves, but it gets strange a blank neh kkk

  • I updated the pen, actually you just apply height to the class .panel so the white space is just inside it. See if it gets better

  • blz, vlew @Celsom thanks

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 contents 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 contents of the first column you 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 is not this configuration combination that is disrupting the proper functioning of the Boostrap Grid System.

  • The sum is not a problem and should not interfere in anything other than the visual. If it is an image gallery or portfolio page, for example, we would have more than 2 Divs for sure, and col-Md-6 would be used only to determine how many Ivs per line we would have, not necessarily having to close the sum of 12 within a Row.

  • @Celsomtrindade, vdd. But lack of Rows or lack of column filling, can bring unexpected behavior. But, vc is right.

  • Yes, my comment does not only apply in your 3rd observation (which is where the AP problem is), the others are correct.

-1

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

Following 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 want to see this code in operation, follow the DEMO.

  • is what I’m talking about : https://jsfiddle.net/8ku9ymcy/ the column is smaller, then it goes down, it would have to be 2 columns in the row, without using Row, and height

  • This does not solve the problem, it only makes it more complex. See: https://jsfiddle.net/p8v225x7/2/

  • I’ll do an example with jQuery of how I want to

  • @Celsomtrinity type: http://codepen.io/furlann/pen/yeXaOy

  • @Furlan see if my answer solves your problem.

Browser other questions tagged css twitter-bootstrap bootstrap-3

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