Bootstrap 4 卡 - 让第一张卡更大

Question

我正在构建一个网站，其中主页是一组卡片，所有卡片都包含在 .card-columns 类中（它们现在看起来像砌体布局）。

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

随着内容的发展，我想编写一次代码（所以没有一次性的类）。

谢谢

这是我的代码：

<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 列
• 列中的cards 不能跨列边界

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

• 你失去了card-columns 的砌体效果

如果您使用 Bootstrap Grid 系统（col-1 等...），您会得到：

• 能够调整列宽并且列会自动换行
• 但你又失去了正确堆叠交错“单元”的砌体效果

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

使用 BS，这与我可以通过一些覆盖和 2 个自定义大小调整类尽可能接近。

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

随着内容的添加，您可能需要将间距类 .x2 和 .x3 移动到其他卡片上，因此这不是“一劳永逸”的解决方案。实际上，对于您要完成的工作，这根本不是解决方案。这更多地向您展示了砌体存在的原因。

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