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网格系统（col-1等......），你会得到：

调整列宽的能力和列将包装
但是你又失去了交错堆积的“细胞”的砌体效果

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

使用BS时，我可以通过一些覆盖和2个自定义大小调整类来获得。

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

随着内容的添加，您可能需要将间距类.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>

Bootstrap 4卡 - 使第一张卡更大

1 个答案: