响应式固定宽度 3 列布局，桌面和移动设备中的全宽抽屉

Question

我有一个 3 列磁贴响应式设计，在移动设备中为 1 列，在桌面中为 3 列，每个磁贴都有一个内容抽屉，需要拉伸屏幕的整个宽度(完成蓝色背景(。

我在下面的笔中有一个工作模型，但无法让抽屉伸展整个宽度？

不确定它是CSS还是是否有更优化的HTML布局，因为进行移动优先设计并且它有效，只是不在桌面/更广泛的视图中。

代码笔：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
function openDrawer(tile) {
var drawer = $(tile).attr("drawer");
if ( $(tile).hasClass("ESGActive") ){ // Already is active?
$(".ESGTile").removeClass("ESGActive");
$("#" + drawer).slideUp();
} else {
// Get all tiles with class="ESGActive" and remove it
$(".ESGTile").removeClass("ESGActive");
// Get all elements with class="ESGDrawer" and hide them
$(".ESGDrawer").slideUp();
// Show the current tab drawer, add "active" class to the button
$("#" + drawer).slideDown();
$(tile).addClass("ESGActive");a
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
.ESGTiles > div{
display:inline;
padding:0;
}
.ESGDrawer {
float:left;
margin:0;
}
.ESGTile > img{
display:none;
}
@media screen and (min-width: 1024px){
.ESGTile > img, .FAQTile > img {
display:block;
}
.ESGTiles > div{
padding:15px;
}
}
@media screen and (max-width: 1024px){
	.ESGDrawer {
		margin-top: 0!important;
		padding: 2em 0!important;
	}
	
	.FAQTile img, .ESGDrawer img {
		display: none;
	}
	
	.ESGTile, .FAQTile {
		margin: 0.2em 0;
	}
	
span.drawerToggle {
position: relative;
width: 24px!important;
height: 24px!important;
float:right;
}
.call-to-action img {
width: 70%;
margin: 0 auto 2em auto;
}
	
}
.FAQTile {
	background: #36872a!important;
	width: 100%;
}
.drawerToggle{
position: relative;
width: 30px;
height: 30px;
float:right;
}
.drawerToggle:before, .drawerToggle:after{
content: "";
position: absolute;
background-color: white;
transition: transform 0.25s ease-out;
}
.drawerToggle:before{
top: -1px;
left: 50%;
width: 2px;
height: 100%;
margin-left: -1px;
}
.drawerToggle:after{
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -2px;
}

/**.ESGTile:hover .drawerToggle:before{ transform: rotate(90deg); } 
.ESGTile:hover .drawerToggle:after{ transform: rotate(180deg); }**/

.ESGActive .drawerToggle:before{ transform: rotate(90deg); } 
.ESGActive .drawerToggle:after{ transform: rotate(180deg); }

.ESGTile, .FAQTile {
	display: block;
	position: relative;
	cursor: pointer;
	overflow: hidden;
	background-color: #1f335a;
	color: #fff;
	z-index: 100;
	font-weight: 700;
}
.ESGTile h3, .FAQTile h3 {
	color: #fff;
}
.ESGTile:hover {
	background-color: #344794;
	color: #fff;
	text-decoration: none;
}
.FAQTile:hover {
	background-color: #00a651!important;
	color: #fff;
	text-decoration: none;
}
.ESGActive {
	background: #344794;
}
.ESGActive:after {
	bottom: -3px;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	z-index: 120;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 10px;
	margin-left: -10px;
}
.ESGTile h3, .FAQTile h3 {
	font-size: 1.2em;
}
.ESGLabel, .FAQLabel {
	margin: 0;
	display: block;
	padding: 0.8em 15px;
}
.ESGDrawer {
	display: none;
	background: #1f335a;
	color: #fff;
	padding: 4em 0;
	margin-top: 0.3em;
	z-index: 90;
	position:inline-block;
	width:100vw;
	left:0;
}
.ESGDrawer h4 {
	font-size: 1.8em;
	margin-bottom: 1em;
}
.ESGDrawer p {
	line-height: 1.4em;
}
.ESGDrawer p.cta-wrapper {
	margin: 0.3em 0 0 0;
}
.ESGDrawer p.cta-wrapper a:before {
	bottom: 0;
}
.ESGDrawer a:link, .ESGDrawer a:hover, .ESGDrawer a:visited {
	text-decoration: none;
	color: #fff;
}
hr {
	display: none;
}
.call-to-action {
padding: 3em 0;
}
footer {
margin-top: 0;
}

<div class="container">
	<div class="row">
		
		<!-- TILE 1 *********************** -->
		<div class="col-xs-12 col-md-4">
			
			<!-- Tile --> 
			<a class="ESGTile" onclick="openDrawer(this)" drawer="title-1">
				<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
				<h3 class="ESGLabel">Title 1<span class="drawerToggle"></span></h3>
			</a>

			<!-- Drawer -->
			<div id="title-1" class="container-fluid ESGDrawer">	
				<div class="container ESGMiddleDrawerContent">
					<div class="row">
						<div class="col-xs-12 col-md-6">
							<h4>Title 1</h4>
							<p>Lorem ipsum</p><p>Lorem ipsum</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- TILE 2 *********************** -->
		<div class="col-xs-12 col-md-4">
			
			<!-- Tile --> 
			<a class="ESGTile" onclick="openDrawer(this)" drawer="title-2">
				<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
				<h3 class="ESGLabel">Title 2<span class="drawerToggle"></span></h3>
			</a>

			<!-- Drawer -->
			<div id="title-2" class="container-fluid ESGDrawer">	
				<div class="container ESGMiddleDrawerContent">
					<div class="row">
						<div class="col-xs-12 col-md-6">
							<h4>Title 2</h4>
							<p>Lorem ipsum</p><p>Lorem ipsum</p>
						</div>
					</div>
				</div>
			</div>
		</div>		
		
		<!-- TILE 3 *********************** -->
		<div class="col-xs-12 col-md-4">
			
			<!-- Tile --> 
			<a class="ESGTile" onclick="openDrawer(this)" drawer="title-3">
				<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
				<h3 class="ESGLabel">Title 3<span class="drawerToggle"></span></h3>
			</a>

			<!-- Drawer -->
			<div id="title-3" class="container-fluid ESGDrawer">	
				<div class="container ESGMiddleDrawerContent">
					<div class="row">
						<div class="col-xs-12 col-md-6">
							<h4>Title 3</h4>
							<p>Lorem ipsum</p><p>Lorem ipsum</p>
						</div>
					</div>
				</div>
			</div>
		</div>		
		
	</div>
</div>

Answer 1

你来了 我在 CSS 的末尾添加了这段代码

.body {
position: relative;
}
.ESGDrawer {
position: absolute;
top: 247px;
left: 0px;
width: 100%;
}
.x{
position: inherit;
}

我为您的每个col-xs-12 col-md-4div添加新的类名

在此处查看工作演示

https://codepen.io/anon/pen/JaQPjN