我在我的项目中使用AngularJS和Bootstrap并给出了available here下面的布局：
+--+ +--------------------------------------+ +--+
|B1| | Search bar | |B2|
+--+ +--------------------------------------+ +--+
+------------------------------------------------+
| Results panel |
+-+----------------------------------------------+
| + result 1 |
| |
| + result 2 |
| |
| + result 3 |
| |
| + result 4 |
| |
+------------------------------------------------+
在点击B1 ：
时，应该更改为以下内容+----------+ +------------------------------+ +--+
| Sidebar | | Search bar | |B2|
+----------+ +------------------------------+ +--+
| |
| +option1 | +-----------------------------------+
| | | Results panel |
| +option2 | +-+---------------------------------+
| | | + result 1 |
| +option3 | | |
| | | + result 2 |
| +option4 | | |
| | | + result 3 |
| +option5 | | |
| | | + result 4 |
| +option6 | | |
+----------+ +-----------------------------------+
一旦“侧栏”打开，“结果面板”和“搜索栏”缩小以便为它腾出空间：这是一个隐藏一些结果细节的机会，只是为了可视化，参考{{3}特别是，应该可以隐藏更新的列。例如。
不幸的是，我无法让事情发挥作用，正如你在我的探索者中看到的那样，我甚至试图将结果面板嵌套在搜索栏中，但这会破坏初始布局：
+--+ +--------------------------------------+ +--+
|B1| | Search bar | |B2|
+--+ +--------------------------------------+ +--+
+--------------------------------------+
| Results panel |
+-+------------------------------------+
| + result 1 |
| |
| + result 2 |
| |
| + result 3 |
| |
| + result 4 |
| |
+--------------------------------------+
这是我不想要的。
我还找到了一个精致的角度指令，my plunker（dajedanié），它显示了我在“推送内容”演示中实际需要的内容，即使唉，看起来像那样选项可以仅用在<body>上，而我需要在我选择的任何<div>中使用它。
有没有办法使用vanilla Bootstrap类，自定义mixins和ng-hide / ng-show获得我需要的东西？