垂直堆叠引导列

Question

我正在尝试制作一个响应式网站，一个博客，但我遇到了一个问题，我每个博客都有 col-lg-4 的引导网格，但它们的高度各不相同，并且通过保持相同的列行来遵循某种模式，但我想删除多余的空格。希望周围的人可以提供帮助。

<div class="container">
   <div class="row">
      <div class="col-lg-4" style="height: 200px"> i am a div of height 
      200px</div>
      <div class="col-lg-4" style="height: 400px"> i am a div of height 
      400px</div>
      <div class="col-lg-4" style="height: 300px"> i am a div of height 
      300px</div>
      <div class="col-lg-4" style="height: 500px"> i am a div of height 
      500px</div>
   </div>
</div>


row{ display: flex; flex-wrap: nowrap}

我目前的博客结构

我想要的方式

Answer 1

我假设您使用的是最新的 BS 版本。如果是这样，您应该看看：

卡栏

通过将卡片包装在 .card-columns 中，只需使用 CSS即可将卡片组织成类似于Masonry的列。卡片是使用 CSS 列属性而不是 Flexbox 构建的，以便于对齐。卡片按从上到下、从左到右的顺序排列。

这是文档中的示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  
  <div class="row">
    
<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="https://dummyimage.com/300" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <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="card-block card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="https://dummyimage.com/300" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <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 card-inverse card-primary p-3 text-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <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 img-fluid" src="https://dummyimage.com/300" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <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-block">
      <h4 class="card-title">Card title</h4>
      <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>
  
  
</div>