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

Question

我有一个带有引导行的页面，其中包含几个col-md-1 Bootstrap列（数量可能会有所不同，但永远不会超过12）。在这个JSFiddle中，您可以看到我的意思。

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

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

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

进一步的要求和信息：

1. 我在AngularJS应用程序中使用它，所以我更喜欢非jQuery 溶液
2. 如果可能的话，IE9 +支持会很好！

Answer 1

您可以使用偏移方法

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

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

Answer 2

由于您希望拥有动态列数，因此Flexbox是最佳选择。

根据您的要求，它支持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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">2</div>
    <div class="col-sm-1">3</div>
    <div class="col-sm-1">4</div>
  </div>
  <br>
  <div class="row">
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">2</div>
    <div class="col-sm-1">3</div>
    <div class="col-sm-1">4</div>

    <div class="col-sm-1">5</div>
    <div class="col-sm-1">6</div>
    <div class="col-sm-1">7</div>
  </div>
</div>

Answer 3

哟只需使用bootstrap和css推送列即可。

一种可能的解决方案是：

HTML：

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

的CSS：

body {
    margin: 10px;
}

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

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

Demo