css - 为什么这些列垂直堆叠而不是水平 bootstrap 4

Question

我最近升级到 bootstrap 4 并注意到我的画廊在 bootstrap 3 上很好(水平列出)现在突然垂直堆叠。

这是为什么呢？发生了什么变化？

A fiddle

我的专栏:

<div class="row gallerymargin">
    <div class="col-md-12">
        <div class="latest_posts default-style">
            <div class="row" id="contentgallery">
                  <div id="album">
                    <div class="col-sm-6 col-lg-4 post">
                      <a href="cms/images/gallerijen/over-ons/8200trouwen.jpg" target="_blank" class="hoverBorder plus lightgallerytrigger">
                        <span class="hoverBorderWrapper">
                          <img style="object-fit:cover;width:100%;height:200px;" src="cms/images/gallerijen/over-ons/8200trouwen.jpg" class="img-responsive" width="370" height="200" alt="" title="">
                          <span class="theHoverBorder"></span>
                        </span>
                        <h6>Bekijk foto +</h6>
                      </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 post">
                      <a href="cms/images/gallerijen/over-ons/Job.jpg" target="_blank" class="hoverBorder plus lightgallerytrigger">
                        <span class="hoverBorderWrapper">
                          <img style="object-fit:cover;width:100%;height:200px;" src="cms/images/gallerijen/over-ons/Job.jpg" class="img-responsive" width="370" height="200" alt="" title="">
                          <span class="theHoverBorder"></span>
                        </span>
                        <h6>Bekijk foto +</h6>
                      </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 post">
                      <a href="cms/images/gallerijen/over-ons/bouwenmet5000.jpg" target="_blank" class="hoverBorder plus lightgallerytrigger">
                        <span class="hoverBorderWrapper">
                          <img style="object-fit:cover;width:100%;height:200px;" src="cms/images/gallerijen/over-ons/bouwenmet5000.jpg" class="img-responsive" width="370" height="200" alt="" title="">
                          <span class="theHoverBorder"></span>
                        </span>
                        <h6>Bekijk foto +</h6>
                      </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 post">
                      <a href="cms/images/gallerijen/over-ons/eersteloodssloophooiberg.jpg" target="_blank" class="hoverBorder plus lightgallerytrigger">
                        <span class="hoverBorderWrapper">
                          <img style="object-fit:cover;width:100%;height:200px;" src="cms/images/gallerijen/over-ons/eersteloodssloophooiberg.jpg" class="img-responsive" width="370" height="200" alt="" title="">
                          <span class="theHoverBorder"></span>
                        </span>
                        <h6>Bekijk foto +</h6>
                      </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 post">
                      <a href="cms/images/gallerijen/over-ons/geschiedenis2.jpg" target="_blank" class="hoverBorder plus lightgallerytrigger">
                        <span class="hoverBorderWrapper">
                          <img style="object-fit:cover;width:100%;height:200px;" src="cms/images/gallerijen/over-ons/geschiedenis2.jpg" class="img-responsive" width="370" height="200" alt="" title="">
                          <span class="theHoverBorder"></span>
                        </span>
                        <h6>Bekijk foto +</h6>
                      </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 post">
                      <a href="cms/images/gallerijen/over-ons/geschiedenis3.jpg" target="_blank" class="hoverBorder plus lightgallerytrigger">
                        <span class="hoverBorderWrapper">
                          <img style="object-fit:cover;width:100%;height:200px;" src="cms/images/gallerijen/over-ons/geschiedenis3.jpg" class="img-responsive" width="370" height="200" alt="" title="">
                          <span class="theHoverBorder"></span>
                        </span>
                        <h6>Bekijk foto +</h6>
                      </a>
                    </div>
                </div>
            </div>
            <!--/ row -->
        </div>
    </div>
</div>

我网站上的所有其他元素都很好，所以我很难找出是什么原因造成的。

Answer 1

删除这个 div <div id="album">从您的 HTML 代码作为bootstrap 4使用 Flex layout , 应将 flex 属性赋予其直接子级(此处为相册类)