css - Bootstrap 4 卡片 - 让第一张卡片更大

Question

我正在构建一个网站，其中主页是卡片的集合，全部包裹在 .card-columns 类中(它们现在看起来像 Masonry 布局)。

我想保持砖石风格，但不是让所有卡片都具有相同的宽度(现在大屏幕上有 6 列)，我希望第一张卡片使用 3 或那 6 列(col- lg-6 也许吧？)，第二个使用 2 列。其他人将紧随其后，并且它们的大小都相同。

随着内容的发展，我想写一次代码(所以没有一次性类(class))。

谢谢

这是我的代码:

<div class="card-columns">

    <a class="card" href="">
        <img class="card-img-top" src="...">
        <div class="card-body border-web">              
           <p>Some content</p>
        </div>
    </a>

    <a class="card" href="">
        <img class="card-img-top" src="...">
        <div class="card-body border-web">              
           <p>Some content</p>
        </div>
    </a>

    <a class="card" href="">
        <img class="card-img-top" src="...">
        <div class="card-body border-web">              
           <p>Some content</p>
        </div>
    </a>

</div>

Answer 1

简短的回答:我看不出如何使用 BS 甚至纯 CSS 来完成。

为此使用 Bootstrap 存在一些问题

• card-columns 使用 css 列
• 卡片列中不能跨越列边界

如果您使用 card-group 可以管理 card 宽度，但是:

• 你失去了 card-columns 的 Masonry like 效果

如果您使用 Bootstrap Grid 系统(col-1 等...)，您将获得:

• 调整列宽和列换行的能力
• 但是你又一次失去了正确堆叠交错“细胞”的 masonry 效果

如果您检查 Masonry home page由于 css 选项定义如此严格，您会看到很多绝对定位。

使用 BS，这是我可以通过一些覆盖和 2 个自定义大小调整类获得的最接近结果。

我正在使用 card-group 来获取 flex 选项，然后覆盖一些 CSS 定义(不是一个好主意)......仍然不错。边距也会弄乱布局，因此您需要在 card 内部添加更多包装器，以在不破坏 flex 流程的情况下处理边框和边距。

随着内容的添加，您可能需要将间距类 .x2 和 .x3 移动到其他卡片，因此这不是一个“即发即弃”的解决方案。事实上，对于您要实现的目标，它根本不是解决方案。这更多是为了告诉你 Masonry 存在的原因。

/* redefines the flex "columns" to 4 per row
*/

.card-group>.card {
  flex: 0 1 25% !important;
  border-radius: calc(.25rem - 1px) !important;
}


/* span 3 "columns"
*/

.x3 {
  min-width: 75% !important;
}


/* span 2 "columns"
*/

.x2 {
  min-width: 50% !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="card-group">
    <div class="card x3 p-3">
      <img class="card-img-top" src="https://picsum.photos/100/80" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title that wraps to a new line</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card p-3">
      <blockquote class="blockquote mb-0 card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer class="blockquote-footer">
          <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    <div class="card x2">
      <img class="card-img-top" src="https://picsum.photos/100/80" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card bg-primary text-white text-center p-3">
      <blockquote class="blockquote mb-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
        <footer class="blockquote-footer">
          <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <img class="card-img" src="https://picsum.photos/100/80" alt="Card image">
    </div>
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer class="blockquote-footer">
          <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>