Need a column width of 8, in the middle of the page. Below its full width (12) in a different color.

I have in the end:

<div class="col-md-2 column">&nbsp;</div><div class="col-md-8 column">ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° 1 </div><div class="col-md-2 column">&nbsp;</div> <div class="col-md-12 column">ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° 2</div>

But for some reason, the bottom column starts from the beginning of the parent div: div I can not find the reason, the address of the page http://lavds-wordpress.tw1.ru/test/ This is WP, the content of the post is inserted inside the <div class="blog-text"> block

Also alignment of tables does not work if they are empty, so I put nbsp.

  • one
    The reason for this behavior is float: left for columns with a width of 2. Wrap different lines in separate divs - Rulet
  • <div><div class="col-md-2 column">&nbsp;</div><div class="col-md-8 column">ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° 1 </div><div class="col-md-2 column">&nbsp;</div></div> <div><div class="col-md-12 column">ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° 2</div></div> do you mean it? does not help, the lower div is still from the beginning of the earlier parent. - Leaverk Vands
  • one
    Add another row class with this div - Rulet
  • thanks, helped - Leaverk Vands
  • And a common div with the class container add - eugene_v

1 answer 1

No floats are needed, do not start mowing at the very beginning, there is such a class .col-md-offset-2 it shifts your block into 2 sections, provided that if you .col-md-2 sections, also look at the properties .col-md-push-2 and .col-md-pull-2 these classes allow you to move blocks (to swap) this is an alternative to float

Try this option 1:

 <div class="container"> <div class="row"> <div class="first col-xs-8 col-xs-offset-2">Колонка 1 с использованиСм .col-xs-offset-2</div> </div> <div class="row"> <div class="second col-xs-12">Колонка 2</div> </div> </div>

option 2:

 <div class="container"> <div class="row"> <div class="sidebar col-xs-2">Sidebar Right</div> <div class="first col-xs-8">Колонка 1 с использованиСм .col-xs-offset-2</div> <div class="sidebar col-xs-2">Sidebar Right</div> </div> <div class="row"> <div class="second col-xs-12">Колонка 2</div> </div> </div>

As for pull and push . On extra small devices (with resolution up to 768px): 1 block is above the second col-xs-12 , on devices with a resolution greater than or equal to 768px, the blocks change their size and are divided in half by col-sm-6 , the first block goes to the right col-sm-push-6 , and the second - to the left col-sm-pull-6 .

 <div class="container"> <div class="row"> <div class="first col-xs-12 col-sm-6 col-sm-push-6">Колонка 1 отправляСм Π΅Π΅ Π²ΠΏΡ€Π°Π²ΠΎ Π½Π° 6 сСкции .col-sm-push-6</div> <div class="second col-xs-12 col-sm-6 col-sm-pull-6">Колонка 2 отправляСм Π΅Π΅ Π²Π»Π΅Π²ΠΎ Π½Π° 6 сСкций .col-sm-pull-6</div> </div> </div>

All examples

  • Thank. This is all clear. It's just that there is a WP template, and the blocks in the editor are set by shortcodes that are predefined in functions, and there was no point in describing all cases to developers. Therefore, float left is used there - Leaverk Vands