Why are these columns stacking vertically instead of horizontally bootstrap 4

问题

I recently upgraded to bootstrap 4 and noticed my gallery which was fine on bootstrap 3 (listed horizontally) is now stacked vertically all of a sudden.

Why is that? What changed?

A fiddle

My columns:

<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>

All other elements on my website were fine, so I have a hard time figuring out what is causing this.

回答1:

Remove this div <div id="album"> from your HTML code As bootstrap 4 uses Flex layout, flex properties should be given to its direct child (here album class )

来源：https://stackoverflow.com/questions/48904413/why-are-these-columns-stacking-vertically-instead-of-horizontally-bootstrap-4