时间戳

首页 > 解决方案 > 如何在blade.php 中构建这种布局？

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

问题描述

下面是我的代码。在此处输入图像描述

<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>

标签： htmlcsslaravelbootstrap-4

解决方案

笔记：

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

步骤1

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

<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（第二部分）

...

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

...

第 5 步（合并所有代码）

...

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

推荐阅读