Question

我一直在尝试使用原始引导程序来实现这种布局，但是对于我一生来说，我无法弄清楚。

经过几次迭代，所以我的标记还远远没有完成，但我希望图片能为有经验的前端提供足够的信息。

 <style>
    .potato{
        background:blue;
        border:1px solid black;
        height:400px;
    }
    .paprika{
        background:red;
        border:1px solid black;
        height:1200px;
    }
</style>

<div class="container">
    <div class="row">

        <div class="col-md-4 potato">
            short box

        </div>
        <div class="col-md-4 potato">
            short box

        </div>
        <div class="col-md-4 potato">
            short box

        </div>


        <div class="col-md-4 potato">
            short box

        </div>
        <div class="col-md-4 potato">
            short box

        </div>
        <div class="col-md-4 paprika">
            Long box

        </div>

        <div class="col-md-4 potato">
            short box

        </div>
        <div class="col-md-4 potato">
            short box

        </div>
        <div class="col-md-4 potato">
            short box

        </div>

    </div>
</div>

Picture of what I am trying to do

Answer 1

这可以通过引导网格（参考https://getbootstrap.com/docs/4.0/layout/grid/）来完成，请参见此处的示例：https://getbootstrap.com/docs/4.0/examples/grid，以了解一些开始的代码。

Answer 2

可以。这是PEN

<div class="container cont">
  <div class="row">
    <div class="any col-md-4 green">
      <div class="div-cont"></div>
    </div>
    <div class="any col-md-4 green">
      <div class="div-cont"></div>
    </div>
    <div class="any col-md-4 green">
      <div class="div-cont"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="any col-md-6 green">
          <div class="div-cont"></div>
        </div>
        <div class="any col-md-6 green">
          <div class="div-cont"></div>
        </div>
      </div>
      <div class="row">
        <div class="any col-md-6 green">
          <div class="div-cont"></div>
        </div>
        <div class="any col-md-6 green">
          <div class="div-cont"></div>
        </div>
      </div>
      <div class="row">
        <div class="any col-md-6 green">
          <div class="div-cont"></div>
        </div>
        <div class="any col-md-6 green">
          <div class="div-cont"></div>
        </div>
      </div>
    </div>
    <div class="col-md-4 big">
      <div class="div-cont-dif"></div>
    </div>
  </div>
</div>

如果您希望CSS就像照片中的CSS一样，您可以使用CSS，但这是一般的想法，在col-md-8内一行。额外的类仅用于颜色和大小，布局全部为引导程序

希望有帮助。

Answer 3

您需要将\*([^*]|\\\*)*[^\\]\* \* a markup star ( then either... [^*] ...any character but a star... | ...or... \\\* ...a star prefix by a backslash, ie a literal star )* any number [^\\]\* then a markup star与.row一起使用，并调整.no-gutters类的填充。

工作版本：https://codepen.io/cdtapay/pen/wNdWXb?editors=1100

是否可以仅使用引导程序来实现此布局？

3 个答案: