bootstrap cloumn 分割_如何在列之间平均分割Bootstrap行宽

I have a page with a bootstrap row, which contains several col-md-1 Bootstrap columns (the amount can vary but never exceeds 12). In this JSFiddle you can see an example of what I mean.

Currently if I have four columns (like in my fiddle), they float left and do not use up the full width of the row:

...

What I want to have, is that the columns keep the same width as above, however they get spread out equally throughout the row. Remember, there can be any number of col-md-1s between 1 and 12! The result width four columns should look something like this:

Further requirements and information:

I'm using this in my AngularJS application, so I'd prefer non-jQuery

solutions

If it's in anyway possible, IE9+ support would be nice!

解决方案

Since you want to have dynamic number of columns, flexbox is the best way to go.

As you required, it supports IE10+

.row {

border: 1px solid gray;

display: flex;

justify-content: space-between;

/* Adding for cross browser support */

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}

.col-sm-1 {

border: 1px solid lightblue;

background: lightblue;

}

1

2

3

4

1

2

3

4

5

6

7