引导行和列说明

Question

Is this valid bootstrap?

<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div> 

Or do I need a new row every 12 columns?

Because right now it does not work for me to do this way. And I do not want to have a row every 12th because I need to filter my articles, and I cant do that when they are in different rows.

Answer 1

Bootstrap has a own Grid-System , which allows you up to 12 columns . From the docu:

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

It has a reason why it is just 12, and not as many as you want to have. This article describes it perfectly well: The Subtle Magic Behind Why the Bootstrap 3 Grid Works

After reading this, you are perfectly ready to work with Bootstraps grid system in the way its meant to be.

Answer 2

You will get a new visual row every 12 columns, but you don't need to define it with markup.

From the documentation :

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Answer 3

Check out the official bootstrap docs on the grid system . It's pretty straight forward.

Basically each row should only add up to 12. So you'd be able to fit two col-sm-6 divs within a single row (displayed as two side-by-side columns)

Answer 4

"Do I need a new row every 12 columns?"..

Contrary to popular opinion, it is okay to have columns that total more than 12 units in a single .row . It simply causes the row to wrap. This is known as column wrapping ..

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

So this...

<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div> 

Is functionally the same as...

<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div>
<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div> 

Having more than 12 columns per row is a common scenario when creating col-* dynamically. If you're having a problem with gaps in columns of different height you can use a CSS clearfix every n-TH column like this.. http://www.codeply.com/go/J6cCo3xL7H