如何使子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設置自己的寬度和高度等。