当列扩展到新行

Question

我正在尝试构建移动优先标头。对于div class="row"的视口，我在一行中有一个md, lg有4列，但当视口下降到sm, xs时，我将2列推到新行，此时row和/或fluid-container未调整大小（增加高度），导致仅显示前两列的截止值。

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

客户和总数在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>

Answer 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>