創建自舉流體不同高度元素網格

Question

我想要獲得一個簡單的網格狀網頁，其中有8個跨越9個職位的DIV。

我已經做了使用引導的網格系統的網站的另一部分以下，而不會在任何問題的（不是實際內容，只是用Photoshop樣機）

我想要做的就是這個： 記住，當在移動設備中查看站點時，元素的順序必須或多或少得到保留。還必須使用Bootstrap標準邊距/襯墊

理想情況下，這將是固定高度的DIV，其中我將放置一個圖像或一些文本，具體取決於哪一個。雙高一會包含畫面

<div class="wrapper" id="mypage"> 
      <section class="grid-container service"> 
       <ul class="small-grid grid-col-3"> 
        <li class="col-3"> 
         <div id="subtitle"> 
          SUBTITLE 1 
         </div> 
        </li> 

        <li class="col-3"> 
         <div id="title"> 
          TITLE 
         </div> 
        </li> 

        <li class="col-3"> 
         <div id="subtitle"> 
          SUBTITLE 2 
         </div> 
        </li> 

        <a href=""> 
         <li class="col-3 img-dynamic-size" style="background-image: url('../1.jpg')"> 
         </li> 
        </a> 
        <a href=""> 
         <li class="col-3 img-dynamic-size" style="background-image: url('../2.jpg')"> 
         </li> 
        </a> 

Sample code of the 1st screen

謝謝你，我無法弄清楚如何思考了一段時間後，做...

Answer 1

好。 。我想我正在關注你，我剛剛製作了一些示例引導程序代碼，以便查看我在說什麼。你可以做到這一點看的只是剝離出相關的填充/保證金，並使用Bootstrap equal-height columns experiment

我剛剛剝離出來上例中的嵌套行的所有相關margin和padding但你可以明顯地與這些值僅抵消播放或根據您自己的需要修改垂直/水平邊距/填充。

HTML

<div class="container"> 
<div class="row"> 
    <div class="col-xs-4 border"> 
     <div id="subtitle">SUBTITLE 1</div> 
    </div> 
    <div class="col-xs-4 border"> 
     <div id="title">TITLE</div> 
    </div> 
    <div class="col-xs-4 border"> 
     <div id="title">TITLE</div> 
    </div> 
</div> 
<div class="row row-eq-height"> 
    <div class="col-xs-8 nopadding"> 
     <div class="row nomargin"> 
      <div class="col-xs-6 nomargin border">Some Content...</div> 
      <div class="col-xs-6 nomargin border">Some More Content...</div> 
     </div> 
     <div class="row nomargin"> 
      <div class="col-xs-6 nomargin border">Some Content Below...</div> 
      <div class="col-xs-6 nomargin border">Some More Content Below...</div> 
     </div> 
    </div> 
    <div class="col-xs-4 border">Content matching height using the 'row-eq-height' class</div> 
</div> 

CSS

.nomargin { 
    margin:0; 
} 
.nopadding { 
    padding: 0; 
} 
.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 
.border { 
    border: 1px solid red; 
    min-height: 50px; 
} 

你可以看到一個jsFiddle here你的HTML沒有使用引導元素......你實際使用引導這個