创建自举流体不同高度元素网格

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没有使用引导元素......你实际使用引导这个