html - 扩展更多列以适应 Bootstrap 中较少列的宽度

Question

在output的 this fiddle :

.row div {
  border: 1px solid;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-3">
    <h1>col-sm-3</h1>
  </div>
  <div class="col-sm-3">
    <h1>col-sm-3</h1>
  </div>
  <div class="col-sm-3">
    <h1>col-sm-3</h1>
  </div>
  <div class="col-sm-3">
    <h1>col-sm-3</h1>
  </div>
</div>

<div class="row">
  <div class="col-sm-2">
    <h1>col-sm-2</h1>
  </div>
  <div class="col-sm-2">
    <h1>col-sm-2</h1>
  </div>
  <div class="col-sm-2">
    <h1>col-sm-2</h1>
  </div>
  <div class="col-sm-2">
    <h1>col-sm-2</h1>
  </div>
  <div class="col-sm-2">
    <h1>col-sm-2</h1>
  </div>
</div>

我正在使用 Bootstrap出于某种原因，我需要展开 5 个 .col-sm-2 列以适应 4 个 .col-sm-3 列的宽度 .

我知道每个 .row 最多可以容纳 12 个 .cols-sm-*(即 * 的总和为 12)。

• 如果我通过设置 style attribute width 展开第二行, 它增加了一个溢出

What is the most safest way to achieve this without horizontal scroll?

Answer 1

通过向其添加一个类来覆盖如下样式，这样它就不会覆盖其他地方的一般行为

.col-sm-2 {
width: 20%;
}