当列扩展到新行时，引导行/容器被切断答案

【问题标题】：Bootstrap Row/Container is cut off when columns expand to new line当列扩展到新行时，引导行/容器被切断
【发布时间】：2015-06-03 20:21:25
【问题描述】：

我正在尝试构建一个 mobile-first 标头。对于md, lg 的视口，我有一个div class="row"，在一行上有4 列，但是当视口下降到sm, xs 时，我将2 列推到新行，此时row 和/或fluid-container 不会调整大小（增加高度），导致截断只显示前两列。

有没有办法防止这种情况发生，或者告诉 Bootstrap 3 的 row 或 container 增长？

customer 和 total 在 xs 和 sm 视图上被截断，灰色区域是一个带有主页内容的新 div：

<div class="container-fluid">
  <div class="row">

    <!-- Sales Order # -->
    <div class="col-xs-6 col-md-2 sp-sales-order">
      <div ng-controller="tabTitleCtrl">
        <div class="sp-header-text">
          {{subtitle}}
        </div>
        <div>
          {{title}}
        </div>
      </div>
    </div>

    <!-- Button Block -->
    <div class="col-xs-6 col-md-4 col-md-push-4 sp-sales-button">
      <div ng-include="toolbarPath">
      </div>
    </div>

    <!-- Totals -->
    <div class="col-xs-6 col-xs-push-6 col-md-2 col-md-push-4 sp-sales-total">
      <div class="row">
        <div class="col-sm-12 sp-header-text">
          Total
        </div>
        <div class="col-sm-12">
          {{Total | currency}}
        </div>
      </div>
    </div>

    <!-- Customer Input Box -->
    <div class="col-xs-6 col-xs-pull-6 col-md-3 col-md-offset-1 col-md-pull-6 sp-sales-customer">
      <div ng-include="headerPath"></div>
    </div>

  </div>
</div>

【问题讨论】：

除了 bootstrap 之外，您还使用任何其他 css 吗？您也可以不发布带有ng-include 的html 模板，而是发布带有所有数据绑定的生成的html。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

试试这个。我从头开始构建它以摆脱代码中的额外类，因此您可以清楚地看到发生了什么。我基本上只是依靠 Bootstrap 以不同的显示宽度为我堆叠 cols - 而不会过度使用类。

我认为这就是你想要的。

Here's a Fiddle

<div class="container-fluid">
    <div class="row">

        <div class="col-md-3 col-sm-6 col-xs-6">
            Invoice
        </div>

        <div class="col-md-3 col-sm-6 col-xs-6">
            <button class="btn btn-default">Void</button>
            <button class="btn btn-default">Post</button>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="form-group">
                <select class="form-control">
                </select>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-6">
            Totals
        </div>

    </div>
</div>

【讨论】：