Question

我希望在屏幕宽度上拉伸div蓝色，这是在bootstrap中的容器类中使用的。这是代码

<div class='container'>
    <img src="http://lorempixel.com/175/80/sports/1" width="230" height="70" class="pull-left" />
    <div class='clearfix'></div>
    <div class= 'padding-top'></div>
    <div class="blue"></div>
    <div class="padding-bottom"></div>

这是蓝色div的CSS

.blue{
    border-top:3px solid #8DBF43;
    width:100% !important;
}

但该指令似乎不起作用，它仍然包含在容器内。

Answer 1

由于div蓝色位于div容器内，因此当您指定width:100%时，它会占用父元素的宽度，在这种情况下，它是{{1}的宽度容器。

Answer 2

为了伸展：

詹姆斯回答非常有用：https://stackoverflow.com/a/22556241/2454790

Bootply ：http://www.bootply.com/123651

CSS ：

.blue{
    border-top:3px solid #8DBF43;
    width:100% !important;
  height:200px;            // <-- height of div
  background:blue;
  position: absolute;     // <-- important 
  left:0;                 // <-- make div to begin at left
  color:white;
  padding-left:15px;      // <-- remove bootstrap padding parent (-15px)
  padding-right:15px;
}

.padding-bottom{
  margin-top:200px;      // <-- make margintop same as the height of .blue
    height:200px;
  background:yellow;
  }

HTML ：与给定的相同

在bootstrap中跨屏幕宽度拉伸div

2 个答案: