砌体布局错误：项目仅显示在左列中

Question

我正在做一个 Bootstrap 4 项目。

对于其中一个页面，我正在尝试将砖石布局宽度的图片放在一起 大多数 其中有一定的宽度，一些其中有两倍的宽度。

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 200
});

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
html {
  font-size: 14px;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline,
a.nounderlie:hover {
  text-decoration: none;
}
.navbar-nav {
  margin-left: auto;
}
.navbar-nav li {
  padding: 0 4px;
}
.navbar-nav li a {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  text-transform: lowercase;
}
.navbar-nav li.active a {
  text-decoration: underline;
}
.navbar-nav.black-text a {
  color: #000;
}
.masonry-layout {
  margin-top: 5rem;
}
.masonry-layout img {
  display: block;
  margin: 0 auto;
}
.masonry-layout .grid-item:nth-child(odd) {
  float: right;
}
.site-footer {
  color: #7E7E7E;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.1/dist/masonry.pkgd.min.js"></script>

<nav class="navbar fixed-top navbar-expand-lg navbar-default">
  <a class="navbar-brand white" href="index.html">
   Logo
 </a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span></span>
 </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav black-text">
      <li class="nav-item">
        <a class="nav-link" href="studii.html">Clients <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Culture</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="page-wrapper">

  <div class="container grid masonry-layout">
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
  </div>

  <footer class="site-footer container-fluid clearfix">
    <div class="row">
      <div class="col-md-6">
        <p class="text-center text-md-left">Toate drepturile rezervate | Propaganda | 2018</p>
      </div>
      <div class="col-md-6">
        <p class="text-center text-md-right">Ne gasesti si pe <a href="#">Facebook</a> si <a href="#">Youtube</a></p>
      </div>
    </div>
  </footer>

</div>

小图都在右栏。我认为这可能是因为 bootstrap 列向左浮动。所以我把 float: right; 添加到每个奇怪的项目。

情况并没有好转。我哪里错了？

Answer 1

列始终需要放在.row中，移除columnWidth: 200。在图像上设置 100% 宽度，这样它们就不会溢出容器。

$('.row').masonry({
  itemSelector: '.grid-item'
});

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
html {
  font-size: 14px;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline,
a.nounderlie:hover {
  text-decoration: none;
}
.navbar-nav {
  margin-left: auto;
}
.navbar-nav li {
  padding: 0 4px;
}
.navbar-nav li a {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  text-transform: lowercase;
}
.navbar-nav li.active a {
  text-decoration: underline;
}
.navbar-nav.black-text a {
  color: #000;
}
.masonry-layout {
  margin-top: 5rem;
}
.masonry-layout img {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.site-footer {
  color: #7E7E7E;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.1/dist/masonry.pkgd.min.js"></script>

<nav class="navbar fixed-top navbar-expand-lg navbar-default">
  <a class="navbar-brand white" href="index.html">
   Logo
 </a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span></span>
 </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav black-text">
      <li class="nav-item">
        <a class="nav-link" href="studii.html">Clients <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Culture</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="page-wrapper">

  <div class="container grid masonry-layout">
 <div class="row">
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
</div>
  </div>

  <footer class="site-footer container-fluid clearfix">
    <div class="row">
      <div class="col-md-6">
        <p class="text-center text-md-left">Toate drepturile rezervate | Propaganda | 2018</p>
      </div>
      <div class="col-md-6">
        <p class="text-center text-md-right">Ne gasesti si pe <a href="#">Facebook</a> si <a href="#">Youtube</a></p>
      </div>
    </div>
  </footer>

</div>

砌体布局错误：项目仅显示在左列中

Masonry layout bug: items are displayed in a left column only

css

bootstrap-4

masonry