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展开第二行，则会添加溢出

在没有horizontal scroll的情况下实现此目的的最最安全的方式是什么？

Answer 1

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

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

Answer 2

您可以覆盖规则，但不能覆盖全局，例如，将您的行包装到自定义类（我的演示中的自定义行）并将col-sm-2最小宽度设置为20％。见演示。

您应该将所有行放在容器中。

http://jsfiddle.net/mznLqdw4/2/

.row div {
  border: 1px solid;
}
.custom-row .col-sm-2 {
  min-width: 20%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <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="custom-row">
    <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>
  </div>
</div>

如果您想要100％宽度，可以将<div class="container"></div>更改为<div class="container-fluid"></div>

在Bootstrap中扩展更多cols以适应更少cols的宽度

2 个答案: