Question

我正在尝试调整bootstrap的标准做法以加快我的一些开发速度，但有一个与显示和隐藏cols相关的快速问题。

我有以下简单的布局

<div class="row" id="contactGrid">

<div class="col-sm-2">Sidebar</div>
<div class="col-sm-10">Content</div>

</div>

当我使用AngularJS显示/隐藏侧栏col时，我希望Content col可以拉伸容器的整个宽度，但它不会在'col-10'处显示。当我隐藏侧边栏时，是否需要以编程方式将类/宽度更改为col-sm-12？

感谢您的帮助，我相信这很简单！

Answer 1

具有类col-sm-10的元素将始终具有其父行的宽度的10/12。因此，当侧边栏变为隐藏时，您需要动态更新它。由于您已经使用过AngularJS，因此您可能会有一个变量来定义侧边栏是否应该可见。此变量还可以有条件地为您的内容div定义您的类。

<div class="row" id="contactGrid">
  <div class="col-sm-2" ng-show="booleanVariable">Sidebar</div>
  <div ng-class="{col-sm-10: booleanVariable, col-sm-12: !booleanVariable}">Content</div>
</div>

Answer 2

丹尼尔，

您的回答是我尝试学习用户界面的BS / NG风格的原因。它只是知道捷径开始和结束的位置。为了完善它，我在ng-class中使用了三元表达式。 showFilterSidebar是我的hide / show变量。再次感谢！

<div ng-class="showFilterSidebar ? 'col-sm-10' : 'col-sm-12'">

Answer 3

是的，您需要将课程更改为col-sm-12并隐藏col-sm-2以避免浮动问题。

隐藏和显示Bootstrap网格列

3 个答案: