響應式固定寬度3列布局，台式機和移動版均配有全寬抽屜

Question

我有一個3列的圖塊自適應設計，其中移動設備為1列，桌面為3列，每個圖塊都有一個內容抽屜，需要擴展屏幕的整個寬度（帶有藍色背景）。

我在下面的筆中有一個工作模型，但無法使抽屜伸展整個寬度嗎？

不知道它是CSS還是在移動優先設計中是否有更好的HTML布局，並且它是否有效，只是不在桌面/更寬的視圖中。

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