如何在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伸展到屏幕的整个宽度? 因为目前它在容器内部是有限的。

3 Solutions collect form web for “如何在bootstrap中的容器内创build100%的屏幕宽度div?”

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

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

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

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

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

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

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

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

  • 如何使用JavaScript检测Twitter Bootstrap 3的响应断点?
  • 什么是sr-only Bootstrap 3?
  • Bootstrap中col-lg- *,col-md- *和col-sm- *有什么不同?
  • Browserify与twitter引导
  • 引导3 - 如何通过AJAX加载模态内容的内容?
  • Bootstrap 3 .col-xs-offset- *不起作用?
  • 在Bootstrap中堆叠列时的垂直空间3
  • 引导堆叠行中的差距
  • selectbootstrap vs材料devise
  • 如何在没有水平滚动条的情况下制作引导程序3stream体布局
  • Bootstrap不会检测到jQuery 1.11.0 - 未捕获错误:Bootstrap的JavaScript需要jQuery