Bootstrap 列、行不适用于 parents 和孩子

Question

Bootstrap 中的一些功能像 -xl 一样工作，但我正在用 col-lg-4 和 col-md-4 做多个 class 并且它不工作.

我希望它们都排成一排，但它们没有随着 classes 移动。

我已经将 parent 设置为 row，将 child 设置为 col，但仍然没有做任何事情。

images that have to be in one row

all my links

all my scripts

代码无效：

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

Answer 1

您在行中的列中有列中的行。这势必会使事情变得混乱。例如 col-6 正在制作一个宽度为页面宽度一半的框。但是你在 col-md-4 中有它，所以实际上你的 col-6 只会成为该父列的一半。您需要重新组织行和列。我已经完成了下面的示例，这样您就可以让所有 div 在移动屏幕上垂直堆叠，但在中等屏幕和更高屏幕上并排堆叠。

<section id="UpcomingMovies">
    <div class="container">
        <h2>Films/Series a venir</h2>
        <div class="row Movies">
               <div class="col-sm-12 col-md-6"><a href="#"><img src="/Images/UpcomingMoviesImages/LeSeigneurDesAnneauxVF.jpg" alt=""></a></div>
               <div class="col-sm-12 col-md-6"><a href="#"><img src="/Images/UpcomingMoviesImages/MoonKnightVF.jpg" alt=""></a></div>
               <div class="col-sm-12 col-md-6"><a href="#"><img src="/Images/UpcomingMoviesImages/Liledes30cercueilsVF.jpg" alt=""></a></div>
               <div class="col-sm-12 col-md-6"><a href="#"><img src="/Images/UpcomingMoviesImages/HaloVF.jpg" alt=""></a></div>
               <div class="col-sm-12 col-md-6"><a href="#"><img src="/Images/UpcomingMoviesImages/StarWarsObiWanKenobiVF.jpg" alt=""></a></div>
               <div class="col-sm-12 col-md-6"><a href="#"><img src="/Images/UpcomingMoviesImages/StrangerThings4VF.jpg" alt=""></a></div>
        </div>
    </div>
</section>

Bootstrap 列、行不适用于 parents 和孩子

Bootstrap col, row not working with good parents and childs

html

bootstrap-4

bootstrap-5