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;
}