隐藏和显示引导程序网格列

Question

我试图改编引导程序的标准实践来加快我的一些发展，但有一个与显示和隐藏cols有关的快速问题。

我有以下简单的布局

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

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

</div> 

当我使用AngularJS显示/隐藏侧边栏山坳我预计内容山坳伸展的容器的整个宽度，但它不是在说' 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

是的，你需要改变类col-sm-12并隐藏col-sm-2，以避免与莲花的问题。

Answer 3

丹尼尔，

你的回答是我努力学习UI的BS/NG风格的原因。它只是知道捷径开始和结束的地方。为了抛掉它，我在ng级中使用了一个三元表达式。 showFilterSidebar是我的隐藏/显示变量。再次感谢！

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