Question

我有以下简化标记：

<div class="row">
    <div class="col-lg-3" ng-if="isSuperUser()">
        Conditional column 1
    </div>
    <div class="col-lg-3">
        Column 2
    </div>
    <div class="col-lg-6">
        Column 3
    </div>
</div>

我希望第3列始终占据最后6个网格列。我还希望第1列或第2列的内容（如果不是超级用户）占用前3个网格列。

问题是当未显示第1列时，第2列和第3列向左移动，使第3列不再位于右侧。看似hacky的解决方案是在第3列之前添加<div class="col-lg-3" ng-if="!isSuperUser()">，但似乎可能有更好的解决方案。

我无法在Bootstrap的文档中看到任何可以演示此功能的文档。我看到有push和pull个类，但它们似乎并不是我想要的。

提前致谢。

Answer 1

JSBIN

您可以尝试将行嵌套到 .col-xs - * 中。这意味着您可以在想要隐藏某些内容之前使用行来固定位置。

 <div class="container">
  <div class="row">
    <div class="col-xs-6">col 6
      <div class="row">
        <div class="col-xs-2">
          2
        </div>
        <div class="col-xs-10">
          10
        </div>
      </div>
    </div>
    <div class="col-xs-6">col 6
      <div class="row">
        <div class="col-xs-12">
          your purpose
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您正在寻找Bootstrap中的offset columns。 有条件地将类.col-lg-offset-3添加到第二列。

Bootstrap网格系统：无论其他列如何，向右拉最后一列？

2 个答案: