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

Question

我正在尝试完成一个简单的类似网格的网页，其中有 8 个 DIV 跨越 9 个位置。

我已经使用 Bootstrap 的网格系统对网站的另一部分进行了以下操作，没有遇到任何类型的问题 （不是实际内容，只是使用 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

来实现这种外观

我刚刚删除了示例中嵌套行上的所有相关边距和填充，但您显然可以使用这些值，只根据您自己的使用需要取消或修改垂直/水平边距/填充。

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