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

将显示/井宽减少到10列

1 个答案: