如何在bootstrap中的容器内创build100％的屏幕宽度div？

比方说，我有以下标记：

<div class="container"> <div class="row"> <div class="col-md-12"> ... <div class="full-width-div"> </div> </div> </div> </div> 

现在如何使.full-width-div伸展到屏幕的整个宽度？ 因为目前它在容器内部是有限的。

Answer 1

你应该把这个div放在容器外面。 你问一个div比它的父母更宽，这是一般不推荐的做法。

如果你出于某种原因不能将它拉出div，你应该改变这个css的位置风格：

 .full-width-div { position: absolute; width: 100%; left: 0; } 

您可以使用固定的，而不是绝对的，但是当您滚动时，它将不会移动。

Answer 2

你应该使用container-fluid ，而不是container 。 请参阅示例： http ： //www.bootply.com/onAFpJcslS

Answer 3

之所以你的full-width-div不能100％地扩展到你的屏幕，是因为它的父“容器”占据了屏幕的80％左右。

如果要使其伸展至屏幕100％，则可以固定“full-width-div”位置或使用“容器stream体”类而不是“容器”。

请参阅Bootstrap 3文档： http ： //getbootstrap.com/css/#grid