Menu
If you take this example (view it here: http://www.bootply.com/93816)
<div class="container"> <div class="row"> <div class="col-md-6">Column1</div> <div class="col-md-6">Column2</div> </div> </div> When you do a print preview of the generated page, it seems to cause the columns to stack/break (as if the float is removed) instead of displaying them in the usual grid layout.
I've had a look at the @media print sections of bootstrap.css and I can't see anything related to div that would cause that to happen.
Does anyone know how to avoid this?
914
Three Equal ColumnsUse the . col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.
offset-md-3 which will offset the desired column element with 3 columns to the right from its default position on medium screen sizes and above. . offset classes always shifts its content to the right. This all stuff produced results .
Well, a 12-column layout was how Bootstrap developed their layout technique. It is more effective because the layout was only intended to grow as large as the body of the page and shrink as small as a few words.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Bojangles comment got me in the right direction, so I'll answer my own question.
Using the 'xs' size grid columns, which according to http://getbootstrap.com/css/#grid-options is for "Extra small devices Phones (<768px)", Bootstrap happily prints as expected.
<div class="container"> <div class="row"> <div class="col-xs-6">Column1</div> <div class="col-xs-6">Column2</div> </div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With