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

Question

我正在研究Bootstrap 4项目。

对于其中的一页，我正在尝试将砖石布局宽度的图片组合在一起，其中最具有一定的宽度， some 则具有两倍的宽度。

$('.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>

小图像全部位于右列。我认为这可能是因为引导程序列向左浮动。所以我在每个奇数项目中添加了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>