如何在blade.php 中构建这种布局？

Question

下面是我的代码。 enter image description here

<div class="container-fluid">
        <div class="row">
            <div class="col-sm-8 col-md-8">

            </div>
            <div class="col-sm-4 col-md-4 border-left">

            </div>
        </div>
    </div>

Answer 1

注意：

您的问题不适合放在 SO 中。您应该提供一个您尝试过但未能得到您想要的东西的最小代码。无论如何，我将与您分享我用来实现此类布局的方法。然后我会留给你来完成你的代码。如果您有任何问题，请随时提出。

第一步

我看到两个大列被垂直分隔符分隔。

<div class="row">
  <section class="col-8"></section>
  <section class="col-4"></section>
</div>

注意：我将把垂直线的实现留给你。

第 2 步（第一部分）

它可以被认为是一个有两列的容器。第一列包含big-box，第二列包含四个small-box's。让我们编辑第一部分的代码<section class="col-8"></section>

<section class="col-8 row">
  <div class="col-6 big-box"></div>
  <div class="col-6 container-small-boxes></div>
</section>

接下来，我们用小框填充具有container-small-boxes 的 div。

<div class="col-6 container-small-boxes row">
  <div class="col-6 small-box"></div>
  <div class="col-6 small-box"></div>
  <div class="col-6 small-box"></div>
  <div class="col-6 small-box"></div>
</div>

section I 的完整代码如下所示

<section class="col-8 row">
  <div class="col-6 big-box">
  </div>
  <div class="col-6 container-small-boxes row">
    <div class="col-6 small-box"></div>
    <div class="col-6 small-box"></div>
    <div class="col-6 small-box"></div>
    <div class="col-6 small-box"></div>
  </div>
</section>

接下来，我留给你三个步骤，让你试着弄脏你的手。

第 3 步（第二部分）

...

第四步（实现small-box和big-box的代码）

...

第 5 步（合并所有代码）

...

如果您有任何问题，请随时发表评论。