html - 响应式固定宽度 3 列布局，在桌面和移动设备中具有全宽抽屉

Question

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

我在下面的钢笔中有一个工作模型，但无法让抽屉拉伸(stretch)到全宽？

不确定是 CSS 还是有更优化的 HTML 布局作为移动优先设计并且它有效，只是不适用于桌面/更广泛的 View 。

Codepen :

<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-4 div 添加一个新类名

在这里查看工作演示

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