Question

我正在尝试做两件事：

使砖石网格的宽度和中心对齐元素均为100％
使用引导程序可见性类显示/隐藏某些元素

我这样做的代码如下：

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  gutter: 5,
  fitWidth: true
});

.grid-item{
  margin: 0 auto 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-item"><img src="https://via.placeholder.com/500x150" alt=""></div>
  <div class="grid-item"><img src="https://via.placeholder.com/500x150" alt=""></div>
  <div class="grid-item d-lg-block d-none"><img src="https://via.placeholder.com/1000x150" alt=""></div>
</div>

我正在使用fitWidth: true，但是网格容器的宽度是固定的。

我在做什么错了？

Answer 1

Masonry设置为 isFitWidth ：是，

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  gutter: 5, 
  isFitWidth: true,
});

Masonry's Codepen example

Answer 2

您将要使用Bootstrap mx-auto类将整个.grid居中...

<div class="grid mx-auto">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item">...</div>
</div>

https://codeply.com/p/kHGkGI4s11

中央对齐砌体网格

2 个答案: