column 1
column 2

What is equivalent to this CSS in Twitter Bootstrap?

<div style="float:left;"> column 1 </div> <div style="float:left;"> column 2 </div> <div style="clear:both;"></div> 

I'm used to writing clear:both . But I heard that Twitter Bootstrap has something called clearfix? On which element should / should clearfix be applied?

+4
source share
2 answers

with css you can just use after psudeo

 .class1:after, .class2:after //append as many as you like { clear:both; *zoom:1; height:0; visibility: hidden; display:block; } alternative(providing children are not using the position selector) (parent-elemts){overflow:hidden;}//bit of a quick fix! 

save unwanted markup from your html file

Edit: sorry! for some reason the add comment button or the up button is not working for me tonight.

To add your answer, to answer another question:

twitter bootstrap you say uses the .clearfix class, which is similar to the css below, but their method must be added to the element, that is: "element class =" clearfix "or similar, where css pseduo we don’t need to add this extra a bit of code in our document.Note that not all browsers support css pseduo's.

+5
source

You will probably only have to:

 <div class="container"> <div class="row"> <div class="span6">column 1</div> <div class="span6">column 2</div> </div> </div> 

clearfix not required.

+10
source

Source: https://habr.com/ru/post/1390344/


All Articles