我有以下简化标记:
<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
类,但它们似乎不是我要找的东西。
提前致谢。
最佳答案
您可以尝试将 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>
关于html - Bootstrap 网格系统 : pull last column right regardless of other columns?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29539505/