javascript - 如何使子div宽度扩展到整页

Question

我的页面上有多行这样的容器，所以当它在小屏幕上显示时，元素会内联移动。 我希望橙色条位于页眉的后面并略低于页眉，并填满页面的宽度。因此，我在橙色条上使用相对定位和负 z-index 将其推到标题下方。

我的问题是如何使后备栏的宽度等于屏幕的宽度，同时将其保留在包含标题的 div 中？

.backbar_orange {
    background-color: rgb(250, 105, 0);
    height: 80px;
    width: 100%;
    position: relative;
    top: 130px;
    z-index: -1;
}

<div class="container">

  <div class="row">
   <div class="col-md-6">
     
	<div class="backbar_orange"></div>
     
    <h2>Sticker</h2>		
	<p>Content here</p>
     
   </div>
   <div class="col-md-6">
     <img src="img/stckr.jpg">
   </div>
  </div>
</div>

JSFiddle

我希望这是有道理的，我试着张贴一张图片来解释我的设计。

我见过有人提到使用 jQuery，但肯定有一种方法可以在 css 中实现吗？我没有使用 jQuery 的经验。 感谢您的帮助。

Answer 1

我不确定你到底在做什么，宽度是我显示器的大小，我假设你正在尝试在标题下添加后退栏，在这种情况下你可以只使用填充CSS。

但是，根据您的图像，您似乎希望宽度在各种图像旁边的列中对齐。

在这种情况下，您可以使用此处的引导网格功能:http://getbootstrap.com/css/#grid

创建两列并为每列内的 div 设置自己的宽度和高度等。