html - 嵌套 Bootstrap 3 网格和 Angular Directive(指令)中的全宽元素

Question

我有一个 Angular 应用程序，它使用 Bootstrap 3 和 Angular UI 进行布局控制。

我想让一个特定的元素适合浏览器的整个宽度。这个元素位于 Bootstrap 网格(col-xx)内，它本身位于一个 Angular Directive(指令)内，该指令位于另一个 Bootstrap 网格内，该 Bootstrap 网格位于 Angular UI 选项卡内，而 Angular UI 选项卡位于另一个网格内。我想你明白了。

使我的元素成为整个浏览器宽度的正确 CSS 是什么？元素的父元素的宽度只是屏幕宽度的一小部分，但我需要这个特定的 div 来覆盖所有内容，因为我需要最大的空间(试图显示甘特图)。

我尝试的效果类似于当前的 google 图片搜索功能，当您单击特定图片时，搜索栏会扩展到整个屏幕。

如果问题有点不清楚，我们深表歉意。我可能需要添加一些代码。

Answer 1

您必须使用 position: fixed 将其从文档流中取出，否则使用 width:100% 将始终指代它占用 100%它的父容器的宽度。

添加 fullWidth 类和如下样式:

.fullWidth {
    position: fixed;
    left: 0;
    right: 0;
}

Here's a Demo in jsFiddle