如何管理 bootstrap Mansory col 高度？

Question

我不明白如何更改我的列的高度以在我的第一列和第二列中包含三个元素。我是设计元素的新手，所以一点帮助对我很有帮助

我要创建的模型：

我的代码如下所示：

<div class="card-columns pl-5 pr-5">
<!-- col 1-->
  <div class="mb-3">
      <h1>Lorem Ipsum</h1>
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Familly-card-hide.png" alt="Card image cap">
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
  </div>
  <!-- col 2-->
  <div class="card">
      <img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Dog-card-hide.png" alt="Card image cap">
  </div>
  <div>
          <span>Lorem ipsum ipsum<img src="assets/Circle-arow-btm.png" alt=""
                                         style="padding-left: 10px; transform: rotate(270deg);"> </span>
  </div>
  <!-- col 3-->
  <div class="card" style="width: 300px;height: auto;">
      <img class="card-img-top" src="assets/Fried-card-hide.png" alt="Card image cap">
  </div>
  <div class="card" style="width: 300px;height: auto;">
      <img class="card-img-top" src="assets/work-card-hide.png" alt="Card image cap">
  </div>
</div>

我希望你能帮助我理解 Masonry 的工作原理，从而帮助我编写这段代码。

Answer 1

Bootstrap 使用 .card-columns 的 Masonry 对于这种情况不是那么灵活的解决方案。最好使用简单的 Bootstrap 网格系统。我做了三列，分别是.col-sm-6、.col-sm-4和.col-sm-2。正如你现在可能，BS 网格包含 12 列，所以我们这里有 6+4+2=12 列。在我的示例中，块的大小将取决于内部图像的比例。 .img-fluid class 制作图像 max-width: 100%; 所以它们不会撕裂父块。

本例仅使用 Bootstrap 4 classed，例如。如果你想添加一些特定的设置 - 你将需要编写额外的 CSS classes 和它们的属性。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container mt-5">
  <div class="row">
    <!-- col 1-->
    <div class="col-sm-6 px-1">
      <div class="mb-2">
        <h1>Lorem Ipsum</h1>
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x600">
      </div>
      <div class="mb-2 text-right">
        <img class="img-fluid w-75" src="https://via.placeholder.com/1000x600">
      </div>
    </div>
    <!-- col 2-->
    <div class="col-sm-4 mt-1 px-1">
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x600">
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1000">
      </div>
      <div class="text-right">
        <span>Lorem ipsum ipsum<img src="https://via.placeholder.com/36x36" alt=""style="margin-left: 10px; transform: rotate(270deg);"> </span>
      </div>
    </div>
    <!-- col 3-->
    <div class="col-sm-2 px-1">
      <div class="mb-2 mt-4">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1300">
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1100">
      </div>
    </div>
  </div>
</div>

关于我在此示例中使用的 Bootstrap 技术的更多信息：

网格https://getbootstrap.com/docs/4.0/layout/grid/
间距https://getbootstrap.com/docs/4.0/utilities/spacing/
image-fluid https://getbootstrap.com/docs/4.0/content/images/
尺码 https://getbootstrap.com/docs/4.0/utilities/sizing/

如何管理 bootstrap Mansory col 高度？

How to manage bootstrap Mansory col height?

html

css

bootstrap-4

masonry

bootstrap-grid