Bootstrap row与col布局失效问题：col-lg-4、col-md-4类无法实现元素同行排列

嘿，我瞅了你的代码，问题出在HTML结构的闭合错误上——你没正确关闭那些外层的.col-lg-4.col-md-4容器，导致Bootstrap的栅格系统没法正常识别布局层级，自然没法让三个列元素排列在同一行。

错误点分析 #

你第一个带col-lg-4 col-md-4类的div，在内部的.row写完之后，没有添加</div>来闭合这个列容器，就直接开始写第二个列元素了；第二个列也犯了同样的错误，直到最后才一次性闭合多个标签，这完全打乱了DOM结构。Bootstrap栅格依赖严格的row -> col层级关系，结构错乱后栅格规则自然无法生效。

修正后的完整代码 #

<!----------- Series Film Prochainement ----------->
<section id="UpcomingMovies">
  <div class="container">
    <h2>Films/Series a venir</h2>
    <div class="row Movies">
      <!-- 第一个列容器，写完内部内容后闭合 -->
      <div class="col-lg-4 col-md-4">
        <div class="row">
          <div class="col-6"><a href="#"><img src="/Images/UpcomingMoviesImages/LeSeigneurDesAnneauxVF.jpg" alt=""></a></div>
          <div class="col-6"><a href="#"><img src="/Images/UpcomingMoviesImages/MoonKnightVF.jpg" alt=""></a></div>
        </div>
      </div>
      <!-- 第二个列容器，写完内部内容后闭合 -->
      <div class="col-lg-4 col-md-4">
        <div class="row">
          <div class="col-6"><a href="#"><img src="/Images/UpcomingMoviesImages/Liledes30cercueilsVF.jpg" alt=""></a></div>
          <div class="col-6"><a href="#"><img src="/Images/UpcomingMoviesImages/HaloVF.jpg" alt=""></a></div>
        </div>
      </div>
      <!-- 第三个列容器，写完内部内容后闭合 -->
      <div class="col-lg-4 col-md-4">
        <div class="row">
          <div class="col-6"><a href="#"><img src="/Images/UpcomingMoviesImages/StarWarsObiWanKenobiVF.jpg" alt=""></a></div>
          <div class="col-6"><a href="#"><img src="/Images/UpcomingMoviesImages/StrangerThings4VF.jpg" alt=""></a></div>
        </div>
      </div>
    </div>
  </div>
</section>

额外小提示 #

• 你可以简化列类写法：因为Bootstrap栅格是向下兼容的，col-md-4会自动应用在md及以上尺寸的屏幕（包括lg），所以只写col-md-4就能达到和col-lg-4 col-md-4一样的效果，代码更简洁。
• 确认你引入的Bootstrap版本是完整的，CSS文件没有漏加载，这也是栅格失效的常见原因之一。

内容的提问来源于stack exchange，提问作者Nabd