html - Bootstrap 网格系统 : pull last column right regardless of other columns?

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 个网格列。如果不是 super 用户，我还希望第 1 列或第 2 列的内容占用前 3 个网格列。

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

我在 Bootstrap 的文档中看不到任何演示此功能的内容。我看到有 push和 pull类，但它们似乎不是我要找的东西。

提前致谢。

Answer 1

JSBIN

您可以尝试将 row 嵌套到 .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>