Javascript 如何在列之间平均分割引导行宽度

我有一个带有引导行的页面，其中包含几个col-md-1引导列（数量可以变化，但不能超过12）。在这里你可以看到我的意思的一个例子

目前，如果我有四列（就像我的小提琴一样），它们会向左浮动，并且不会占用整行的宽度：

...

我想要的是，列保持与上面相同的宽度，但是它们在整个行中均匀分布。记住，在1和12之间可以有任意数量的col-md-1！四列的结果宽度应如下所示：

其他要求和资料：

我在AngularJS应用程序中使用它，所以我更喜欢非jQuery 解决方案

如果有可能的话，IE9+支持会很好

---

可以使用偏移方法

<div class="container">
<div class="row">
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
</div>
</div>

试试这个，这个可能对你有帮助

---

您只需通过引导和css推送列就可以做到这一点

一种可能的解决方案是：

Html:

---

因为您想要动态的列数，flexbox是最好的选择

根据您的需要，它支持

.row{
边框：1px纯色灰色；
显示器：flex；
证明内容：之间的空间；
/*添加跨浏览器支持*/
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：证明；
-webkit证明内容：之间的空间；
-ms-flex-pack:justify；
证明内容：之间的空间；
}
.col-sm-1{
边框：1px纯色浅蓝色；
背景：浅蓝色；
}

1.
2.
3.
4.


1.
2.
3.
4.
5.
6.
7.

您提供的链接（）说它不支持IE9。哎呀！支持从IE10开始。但是您可以使用不同的代码来执行IE9回退。

<div class="container">
<div class="row">
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
</div>
</div>

<div class="container">
  <div class="row col-sm-10 col-sm-push-1">
    <div class="col-sm-1"></div>
    <div class="col-sm-1 col-sm-push-1"></div>
    <div class="col-sm-1 col-sm-push-2"></div>
    <div class="col-sm-1 col-sm-push-3"></div>
  </div>
</div>

body {
    margin: 10px;
}

.row {
    border: 1px solid red;
    padding: 0 4%;
}

.col-sm-1 {
    border: 1px solid blue;
    padding: 50px;
}