Question

我正在努力获得一个简单的网格式网页，其中有8个DIV跨越9个位置。

我使用Bootstrap的网格系统对网站的另一部分进行了以下操作，而没有遇到任何类型的问题 Standard grid （不是实际的内容，只是使用Photoshop的模型）

我想做的是： this 请记住，在移动设备中查看网站时，元素的顺序必须或多或少地保留。还必须使用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

创建一个Bootstrap流体，不同高度的元素网格

1 个答案: