Question

现在我的网格设置如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class='col-md-12 col-sm-12 col-xs-12'>
    <div class='col-md-9 col-sm-9 col-xs-12 text-center'  style="height:200px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
         DIV 1
    </div>

    <div class='col-md-3 col-sm-3 col-xs-12'style="height:320px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
         DIV 2
    </div>

    <div class='col-md-9 col-sm-9 col-xs-12 text-center' style="height:200px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
         DIV 3
    </div>
</div>

我当前的输出是

我想摆脱div 1和div 3之间的空白。我不想合并div 1和div3，因为在移动模式下div 2低于div 3。

我的预期结果是

如何在引导程序中实现此目标？

Answer 1

非常简单：下面是使用bootstrap 4的演示。网格必须包裹在container内，而col总是包裹在row内。

div {
  background: skyblue;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      <div class="row">
        <div class="col-12">
          DIV 1
        </div>
        <div class="col-12 d-block d-md-none">
          DIV2 on small
        </div>
        <div class="col-12">
          DIV 3
        </div>
      </div>
    </div>
    <div class="col-md-4 d-none d-md-block">
      DIV 2
    </div>
  </div>
</div>

Here is a JSFIDDLE link to play around with

Answer 2

怎么样

<div class="row">
    <div class="col-sm-9">
        <div>
            div 1
        </div>
        <div class="visible-xs">
            div 2
        </div>
        <div>
            div 3
        </div>
    </div>
    <div class="col-sm-3 hidden-xs">
        div 2
    </div>
</div>

这里是JSfiddle https://jsfiddle.net/rutmws7a/

如何像砌体布局一样对齐Bootstrap网格？

2 个答案: