html - html Bootstrap 行 background 图像比其父网格宽度宽

  显示原文与译文双语对照的内容
138 3

使用 Bootstrap,我想要一个 div behind,另一个 div,所以使用 z-index的位置:绝对和 relative 。

执行这里操作时,div下的每个div都有 z-index:1转到 behind 这个 div,而我希望它保持在它下面。

在使用 100%时,div也比 max-width 宽。

<div class="row" id="MENUROW">
 <div class="col-md-12" id="MENUCOLUMN"><h1>SHOP</h1></div>
</div>
<div class="row" id="MAINROW"> <!-- this has the background-image -->
 <div class="col-md-12" id="MAINCOLUMN">
 </div>
</div>

css:

#MENUROW
 {
 position: relative;
 height: 80px;
 background-color: transparent;
 z-index: 2;
 }
#MAINROW 
 {
 position: absolute;
 z-index: 1;
 top: 60px;/*because there is 1 div above the menu div, this div needs to be just under that div, behind the menu div */
 width: 100%;
 background-image: url(../images/background.jpg);
 background-size: cover;
 }

这样做时,background 图像比父div的宽度更宽。

例如 https://jsfiddle.net/2cs60vrr/3/ 示例,只是让红色显示它应该有多宽,图像的宽度要大得多

时间:原作者:0个回答

145 0

如果我们不确定你正在寻找什么,但你想要的是什么?

.grid {
 margin: 0 auto;
 max-width: 100%;
 width: 100%;
 background-color: #fff;
}
.row {
 width: 100%;
 margin-bottom: 0px;
 display: flex;
}
#MENUROW {
 position: absolute;
 height: 80px;
 background-color: red;
 z-index: 2; 
}
#MAINROW {
 position: absolute;
 z-index: 1;
 top: 0;
 width: 100%;
 max-width: 1400px;
 background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
 background-size: cover;
}

https://jsfiddle.net/norcaljohnny/xt9c9d2r/2/

原作者:
129 1

磅 1磅

你在 HTML 中没有使用 .container 类。Bootstrap 有一个结构来获取最大特性。你必须使用 .containerBootstrap 结构为 below:

<div class="container">
 <div class="row">
 <div class="col-*-*">
 Your Content
 </div>
 </div>
</div>

将你的html作为 above 来解决这个问题。

磅 2磅

如果你不想更改 html,那么可以使用这里代码 below 来解决这个问题。

margin-left:0;
margin-right:0;
原作者:
129 5

你应该将整个包装包围在整个事件的位置:相对;两行都是 position:absolute ;

完成。

使用位置:绝对;block 转到最接近的父html标签的左上角,它有一个 position:relative ;。如果没有父位置:相对;绝对定位项转到屏幕左上角。

( 第一行不是第二个行的父级,但它们是同级的。包装器"网格"是 2行的父元素)

<div class="grid">
 <div class="row" id="MENUROW">
 <div class="col-md-12" id="MENUCOLUMN">
 <h1>SHOP</h1>
 </div>
 </div>
 <div class="row" id="MAINROW">
 <div class="col-md-12" id="MAINCOLUMN">
 text
 </div>
 </div>
</div>

和 CSS

. grid {
 position: relative;
 }
.row {
 width: 100%;
}
#MENUROW {
 position: absolute;
 background-color: red;
 z-index: 1;
}
#MAINROW {
 position: absolute;
 z-index: 2;
 background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
 background-size: cover;
}

以下是你的更新示例:https://jsfiddle.net/2cs60vrr/6/

原作者:
...