如何在引導程序中在大屏幕上堆疊兩列

我正在使用引導框架的網站的網格佈局。我想要一個顯示2個堆疊div的網格，它跨越col-lg-4的寬度，緊挨着一個跨越col-lg-8寬度的大div，並且其高度與兩個堆疊div相等。如何在引導程序中在大屏幕上堆疊兩列

<div class="mockups_wadels"> 
    <div class="div_center"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid_padding"> 
        <div class="wadels_dark"> 
        </div> 
       </div> 
       <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 grid_padding"> 
        <div class="wadels_embroidery"> 
        </div> 
       </div> 
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 grid_padding"> 
        <div class="wadels_white"> 
        </div> 
       </div> 
      </div><!--end of row--> 
      <div class="row"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
        <div class="wadels_browser"> 
        </div> 
       </div> 
      </div> 
     </div><!--container end--> 
    </div><!--end div center--> 
</div><!--end of mockup-->

這裏是一個jsfiddle來幫助說明。我的問題是我不知道如何強制兩個col-lg-4 div堆疊在一起。而不是堆疊第二個div只是開始一個新的行。 http://jsfiddle.net/Dinkledine/0w2fppx6/

慾望結果

感謝您的幫助

來源

2015-10-09 Dinkledine

我想我現在明白你的意思了。你想要一個4 + 8行（4個被另外4個堆疊）和匹配高度？編輯：你的'grid-padding'是做什麼的？ – Onilol

是的，這是正確的。如果這是令人困惑的道歉。這很難說出來。最終的結果應該形成一個3個部分的大廣場。 – Dinkledine

最多一行是12列，所以你可以使用2xcol-lg-2 + col-lg-8或col-lg-2 + col-lg-8 + col-lg-2我不確定你想要什麼佈局 –

你可以做這樣的事情：

<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
     <div class="col-lg-12 col-md-12 col-sm-12"></div> 
     <div class="col-lg-12 col-md-12 col-sm-12"></div> 
    </div> 
    <div class="col-lg-8 col-md-8 col-sm-8"> 
     <div class="col-lg-12 col-md-12 col-sm-12"></div> 
    </div> 
</div>

記住，行是基於12列，所以你想想大佈局。

你最初以你想要的方式分割你的屏幕（4 + 8），在這些內部就是魔法發生的地方！

由於12 col wide div佔據整個空間（它可能是一個容器或任何大小的div），下一個div將在它下面堆疊。

來源

2015-10-09 15:41:31 Onilol

我不認爲這是最好的解決辦法，但檢查出來http://jsfiddle.net/b4voqjud/2/

<div class="mockups_wadels"> 
<div class="div_center"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <div class="wadels_dark"></div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <div class="wadels_dark"></div> 
        </div> 
       </div> 
      </div> 

      <div class="col-sm-8"> 
       <div class="wadels_dark"></div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
       <div class="wadels_browser"> 
       </div> 
      </div> 
     </div> 
    </div><!--container end--> 
</div><!--end div center--> 
</div><!--end of mockup-->

如果你想這兩個colums永遠是相同的高度，我不認爲你可以做到這一點與引導，你必須使用JavaScript，或者Flexbox的，或只是調整不同的設備上填充大小

來源

2015-10-09 15:42:39

這是我用面板和col解決方案layout.If你需要填充移除類nopadding

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
    <title> New Document </title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <style type="text/css"> 
 
\t .nopadding { 
 
\t padding: 0 !important; 
 
\t margin: 0 !important; 
 
\t } 
 
    </style> 
 
</head> 
 

 
<body> 
 
\t <div class="container-fluid row-offcanvas nopadding"> 
 
\t \t \t <div class="col-sm-5 nopadding"> 
 
\t \t \t \t <!--Content 1--> 
 
\t \t \t \t <div class="col-sm-12 col-md-12 nopadding"> \t \t 
 
\t \t \t \t \t <div class="panel panel-default nopadding"> 
 
\t \t \t \t \t \t <div class="panel-heading" style="background-color: lightblue; color: #000; font-weight:bold">content 1</div> 
 
\t \t \t \t \t \t \t <div class="panel-body" style="height:270px;overflow:auto;"></div> \t \t \t 
 
\t \t \t \t \t \t <div class="panel-footer" style="background-color: lightblue;"></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div><!--Content 1 Ends--> 
 

 
\t \t \t \t <!--Content 2--> 
 
\t \t \t \t <div class="col-sm-12 col-md-12 nopadding" > 
 
\t \t \t \t \t <div class="panel panel-default nopadding"> 
 
\t \t \t \t \t \t <div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">content 2</div> 
 
\t \t \t \t \t \t \t <div class="panel-body" style="height:270px;overflow:auto;"></div> 
 
\t \t \t \t \t \t <div class="panel-footer" style="background-color: lightsteelblue;"></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div><!--Content 2 Ends--> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="col-sm-7 nopadding"> 
 
\t \t \t \t <!--Content 3 --> 
 
\t \t \t \t <div class="col-sm-12 col-md-12 nopadding"> 
 
\t \t \t \t \t <div class="panel panel-default nopadding"> 
 
\t \t \t \t \t \t <div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">Content 3</div> 
 
\t \t \t \t \t \t \t <div class="panel-body" style="height:602px;overflow:auto;"></div> 
 
\t \t \t \t \t \t <div class="panel-footer" style="background-color: lightsteelblue;"></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div><!--Content 3 Ends --> 
 
\t \t </div> 
 
\t </div> \t <!--row--> \t 
 
</body> 
 
</html>

來源

2015-10-10 08:43:14 vickisys

如何在引導程序中在大屏幕上堆疊兩列

回答

相關問題