如何使用 Bootstrap 4 创建砖石布局? [英] How to create a masonry layout using Bootstrap 4?

查看：12
本文介绍了如何使用 Bootstrap 4 创建砖石布局?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在努力实现这一目标:

使用 Bootstrap 4、Js、Css 和 HTML.我没有在 SO 上找到类似的东西，

但我在 Bootstrap 4 文档中找到了这个，但我不确定这是否正确:引导 4 张卡

有人可以告诉我创建此布局的最佳方法吗?

谢谢

这与您可以看到的其他问题不同，即使此问题已标记为重复.在我的例子中，卡片"没有放在正确的列中，但每列都有自己的宽度.请标出我的问题与其他问题的区别

我让它工作了.https://youtu.be/CvmeGvKbPlM

解决方案

正如@Yan 所说，您可以使用 .card-columns 来归档 Masonry 布局，您可以在 Boostrap 4 文档.

代码应该是这样的:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQZFZCSftdhkL><div class="容器"><div class="card-columns"><div class="card"><img class="card-img" src="http://via.placeholder.com/450x350" alt="卡片图片上限">

<div class="card"><img class="card-img" src="http://via.placeholder.com/150x150" alt="卡片图片上限">

<div class="card"><img class="card-img" src="http://via.placeholder.com/250x150" alt="卡片图片上限">

<div class="card"><img class="card-img" src="http://via.placeholder.com/250x150" alt="卡片图片上限">

<div class="card"><img class="card-img" src="http://via.placeholder.com/150x150" alt="卡片图片上限">

<div class="card"><img class="card-img" src="http://via.placeholder.com/350x150" alt="卡片图片上限">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiWpljCri/cross="匿名"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQpgin>gts"cross"</script>

I'm trying to achieve this:

Using Bootstrap 4, Js,Css and obviously HTML. I did not succeed to find something similar on SO,

but I found this on the Bootstrap 4 documentation, but I'm not sure if this is the right thing: Bootstrap 4 Cards

Can someone enlight me on the best way to create this layout?

Thanks

EDIT:This is not the same as other questions you can see, even if this question has been marked as duplicated. On my example, the 'cards' are not sitting in proper columns, but each one has his own width. Please mark the difference between my question and others

EDIT2: I made it work. https://youtu.be/CvmeGvKbPlM

解决方案

As @Yan said you can use .card-columns to archive a Masonry layout, you can find more information in the Boostrap 4 docs.

There's how the code should look:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container">
<div class="card-columns">
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/450x350" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/150x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/250x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/250x150" alt="Card image cap">
  </div>
    <div class="card">
    <img class="card-img" src="http://via.placeholder.com/150x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/350x150" alt="Card image cap">
  </div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

这篇关于如何使用 Bootstrap 4 创建砖石布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆