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

【问题标题】：How to split up Bootstrap row width equally between columns如何在列之间平均分割 Bootstrap 行宽
【发布时间】：2015-08-11 20:28:28
【问题描述】：

我有一个带有引导行的页面，其中包含几个 col-md-1 引导列（数量可以变化，但从不超过 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！结果宽度四列应如下所示：

更多要求和信息：

我在我的 AngularJS 应用程序中使用它，所以我更喜欢非 jQuery 解决方案
如果可能的话，IE9+ 支持会很好！

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

你提供的链接 (caniuse.com/#feat=flexbox) 说它不支持 IE9。
糟糕！支持从 IE10 开始。但是您可以使用Modernizer 并为 IE9 回退使用不同的代码。

【解决方案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

【讨论】：