无法在 Bootstrap 4 中找出响应卡

Question

我刚刚使用 Bootstrap 4 从头开始​​构建了一个新网站。我创建了一个流体容器，然后在其中插入了一个包含 8 列的 Grid Row，并在这 8 列中的每一列中插入了一张带有图像的卡片。

一切看起来都很好，直到我意识到它没有响应。事实上，在 xl 处，卡片连续显示 4 张，但在 lg 处，卡片全部垂直堆叠，就像在手机上查看一样。

尽我所能，无论我玩多少 col 类，我都无法让卡片响应。

有人可以帮我让这个东西响应吗？基本上，我想要 xl 的 4 张牌（这就是他们现在正在做的），lg 的 3 张牌，md、sm 和 xs 的 2 张牌。同样，现在它在 xl 上显示为 4 跨，而在所有其他尺寸下仅显示 1 跨（垂直堆叠）。

这是我第一次来这里，希望在我输入后我可以包含一些代码。非常感谢。

代码示例：

 <div class="container-fluid"> 
    <!--Image Grid-->
    <div class="row"> 
      <!--Real people Reel-->
      <div class="col-xl-3">
        <div class="card col-md-4 col-xl-12"> <img class="card-img-top img-fluid" src="images/university_hospital_network.jpg" alt="Real people Reel"> </div>
        <div class="card-body">
          <h5 class="card-title">Real People Reel</h5>
          <p class="card-text text-open-sans">Your greatest and most credible asset.</p>
          <br>
          <br>
        </div>
      </div>
      <!--End Real People Reel--> 

      <!--University Hospital Newark-->
      <div class="col-xl-3">
        <div class="card col-md-4 col-xl-12"> <img class="card-img-top img-fluid" src="images/surgeons.jpg" alt="Real people Reel"> </div>
        <div class="card-body">
          <h5 class="card-title">University Hospital Newark</h5>
          <p class="text-open-sans">Medical accuracy... expert compliance, clearances and licensing expertise.</p>
          <br>
          <br>
        </div>
      </div>
      <!--End University Hospital Newark--> 

Answer 1

我认为每个“项目”连续插入响应类到那里。

<div class="container-fluid"> 
    <!--Image Grid-->
    <div class="row"> 
        <!--Real people Reel-->
        <div class="col-xl-3 col-lg-4 col-md-6"> <!-- add new class here -->
            <div class="card"> <!-- remove class here -->
            <img class="card-img-top img-fluid" src="images/university_hospital_network.jpg" alt="Real people Reel"> </div>
            <div class="card-body">
                <h5 class="card-title">Real People Reel</h5>
                <p class="card-text text-open-sans">Your greatest and most credible asset.</p>
            </div>
        </div>
        <!--End Real People Reel--> 

        <!--University Hospital Newark-->
        <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="card">
                <img class="card-img-top img-fluid" src="images/surgeons.jpg" alt="Real people Reel"> </div>
                <div class="card-body">
                    <h5 class="card-title">University Hospital Newark</h5>
                    <p class="text-open-sans">Medical accuracy... expert compliance, clearances and licensing expertise.</p>
                </div>
            </div>
        </div>
        <!--End University Hospital Newark--> 
    </div>
</div>

顺便说一句，访问 W3School 了解更多关于Bootstrap 4 grid system的信息

所以我希望它可以帮助你。