Html 引导4-以自定义方式显示卡

我正试图在Bootstrap4的基础上创建一个合适的语义HTML/CSS，它可以以某种方式呈现卡片元素，而不会添加太多的自定义块

到目前为止，我得到的是：

<section class="section d-flex align-items-center">
  <div class="container">
    <div class="row news-block">
      <div class="col-md-5">
        <div class="card text-center pt-3 card-simple">
          <a href="#GO" class="click-overlay"></a>
          <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

          <div class="card-body">
            <h4 class="card-title">Test 1</h4>

          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="row">

          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple mb-4">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 2</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 3</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 4</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 5</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 6</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 7</h4>

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

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

测试1
测试2
测试3
测试4
测试5
测试6
测试7

一个密码笔来了解我的意思：

我想要实现的目标：

• 所有卡之间的间距相同（垂直和水平）
• 左边的“大”牌应与右边的6张牌的高度相同
• 保持它的响应性

有没有一个很好的“bootstrap4”方法可以做到这一点，或者说我需要到处转转吗

还有，我应该把所有的东西都包在牌堆里吗？如果是，为什么？（当卡片水平堆叠在其他自定义组件上时，我使用卡片组）

---

欢迎使用任何提示。

您可以使用Bootstrap 4调整布局

• h-100

  使左侧卡达到最大高度以匹配较小的卡

• p-2

  间距（填充），使立柱之间的檐槽均匀

测试1
测试2
测试3
测试4
测试5
测试6
测试7

---

另外，如果你想要一个更大的排水沟，

p-3

可以代替

p-2

。

我还没说完他就回答了，但这是他所做的另一个版本哈哈

<section class="section d-flex align-items-center">
  <div class="container-fluid px-0">
    <div class="row m-0 news-block pt-3 pl-3">
      <div class="col-md-5 mb-3 pl-0 pr-3 pr-md-0">
        <div class="card h-100 text-center pt-3 card-simple">
          <a href="#GO" class="click-overlay"></a>
          <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

          <div class="card-body">
            <h4 class="card-title">Test 1</h4>

          </div>
        </div>
      </div>
      <div class="col-md-7 pl-0 pl-md-3 pr-0">
        <div class="row mx-0">

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 2</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 3</h4>
              </div>
            </div>
          </div>

           <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 4</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 5</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 6</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 7</h4>
              </div>
            </div>
          </div>







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

测试1
测试2
测试3
测试4
测试5
测试6
测试7

---

TY，我似乎把事情搞得太复杂了，忘了h-100！看起来Bootstrap4已经想到了：）泰，你能把它放在叉形笔里吗，这样我就可以比较选项了。现在我正在更改较小卡片的字体大小，但它在所有屏幕上都不能很好地工作，并没有被接受的答案，也许在你们的屏幕上可以。编辑！添加链接到底部

<section class="section d-flex align-items-center">
  <div class="container-fluid px-0">
    <div class="row m-0 news-block pt-3 pl-3">
      <div class="col-md-5 mb-3 pl-0 pr-3 pr-md-0">
        <div class="card h-100 text-center pt-3 card-simple">
          <a href="#GO" class="click-overlay"></a>
          <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

          <div class="card-body">
            <h4 class="card-title">Test 1</h4>

          </div>
        </div>
      </div>
      <div class="col-md-7 pl-0 pl-md-3 pr-0">
        <div class="row mx-0">

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 2</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 3</h4>
              </div>
            </div>
          </div>

           <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 4</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 5</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 6</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 7</h4>
              </div>
            </div>
          </div>







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