Bootstrap 4 - 以自定义方式显示卡片

Question

我正在尝试基于 Bootstrap 4 创建一个适当的语义 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>

一个 Codepen 看看我的意思：https://codepen.io/wiwa-cloud/pen/rKxqYw?editors=1100

我想要达到的目标：

• 所有卡片之间的间距相同（垂直和水平）
• 左侧的“大”卡片应与右侧列的高度相同，共 6 张卡片
• 保持响应

有没有一种很好的“bootstrap 4”方法可以做到这一点，还是我需要大量修改？

另外，我应该将所有内容都包装在 .card-deck 中吗？如果是，为什么？ （当卡片水平堆叠在其他自定义组件上时，我使用卡片组）。

感谢任何提示。

Answer 1

您可以使用 Bootstrap 4 utility classes 来调整布局...

• h-100 使左侧卡片全高以匹配较小的卡片
• p-2 间距（填充）使列之间的间距均匀

https://www.codeply.com/go/CPe58ZHi2u

<section class="section d-flex align-items-center">
  <div class="container">
    <div class="row news-block py-1">
      <div class="col-md-5 p-2">
        <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 1</h4>

          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="row">
          <div class="col-md-4 p-2">
            <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 2</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <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 p-2">
            <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 p-2">
            <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 p-2">
            <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 p-2">
            <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>

另外，如果您想要更大的排水沟，可以使用p-3 代替p-2。

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

https://codepen.io/chulps/pen/PaZgNO