如何在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

  • 使用Bootstrap 3在AngularJS中表示Grid或Table的最佳方法?
  • Bootstrap 3 RC 1中的typeahead JavaScript模块在哪里?
  • 从引导3导航栏的折叠中排除菜单项
  • 文本旁边的品牌
  • 了解Bootstrap 3中的网格类(col-sm-#和col-lg-#)
  • 在twitter引导五个相等的列
  • 如何在bootstrap中使用垂直alignment
  • Twitter引导3 - 创build自定义graphics并添加到graphics“字体”
  • 在Bootstrap 3的Twitter Typeahead上的CSS问题
  • Bootstrap表行hover
  • 带有固定包装的Bootstrap网格 - 防止堆叠起来