为什么这些列垂直堆叠而不是水平引导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

从HTML代码中删除此div <div id="album"> 由于bootstrap 4使用Flex layout，因此应将flex属性赋予其直接子项（此处为专辑类）