时间戳

首页 > 解决方案 > 无法在 Bootstrap 4 中找出响应卡

html - 无法在 Bootstrap 4 中找出响应卡

问题描述

我刚刚使用 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-->

标签： htmlcssbootstrap-4containersmultiple-columns

解决方案

I think each "item" in a row, insert responsive class to there like that.

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

By the way, visit W3School for more information about Bootstrap 4 grid system

So I hope it can help you.

推荐阅读