隐藏和显示 Bootstrap 网格列

Question

我想要将Bootstrap的标准实践应用到我的开发中，以加快开发速度，但是有一个关于显示和隐藏列的问题。

我有下面这个简单的布局：

<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"吗？谢谢你的帮助，我相信这很简单！

- Mrmartin

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>

- Daniel

Answer 2

Daniel，

你的回答是我正在尝试学习BS/NG UI风格的原因。只需要知道快捷方式在哪里开始和结束即可。为了使其更加完美，我在ng-class中使用了三元表达式。showFilterSidebar是我的隐藏/显示变量。再次感谢！

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

- Mrmartin

---

我同意你的观点，这个解决方案比我的更易读。祝你在使用Angular时玩得开心 ;) - Daniel

Answer 3

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

- Soufiane