将显示/孔宽度减少到 10 列

Question

刚从 Bootstrap 3 开始 - 如果这是一个愚蠢的问题，对不起。

问题是我不想为这个特定的表单使用整个窗口的宽度。在桌面上总是会填满，但是没有足够的信息来填满 12 列，而且覆盖所有 12 列的井看起来不太好。

我有一个包含两列文本框的布局，如下所示（工作小提琴here）：

<div class="row">
  <div class="col-md-6">  <!-- left column -->
    <div class="row">     <!-- lots of rows in left col-->
      <!-- text box with label, width col-md-12 -->
    </div>
  </div> <!-- end of left column -->

  <div class="col-md-6">  <!-- right column -->
    <div class="row">     <!-- lots of rows in right col -->
      <!-- text box with label, width col-md-12 -->
    </div>
  </div> <!-- end of right column -->
</row>

左列是col-md-6，包含宽度为col-md-12的行，右列是一样的。

这看起来不错，但是文本框太宽，左右文本框之间的间距不太合适。因此，我将外行更改为 10 列而不是 12 列（通过将 col-md-6 更改为 col-md-5）。文本框现在看起来不错，但右侧有很大的空白。 Bootstrap 正在右侧生成 2 个空列，以使 10 列恢复为 12。

我有什么办法可以剪掉右边的两列，这样井在第二列之后就结束了吗？我试过.container 和.container-fluid。谢谢。

Answer 1

您可以将offset 作为container 类的一部分并更改为col-xs-10。这将使所有页面内容适合 10 列。

<div class="container col-xs-offset-1 col-xs-10">

通过 CSS 执行此操作的另一种方法如下，它将影响您的所有 container 类。

.container {
  margin-left: 8.3333%; //the same margin as added by col-xs-offset-1
  width: 83.3333%; //the same width as added by col-xs-10
}

如果您希望这适用于所有页面，则首选 CSS（第二种方法）。如果只是一两页，则首选第一种方法。

Bootply Demo (1st option) / Bootply Demo (2nd option)

（另外，您的问题中有一个错字，它是 </row>，应该是 </div>）。