文章/答案/技术大牛

发布

社区首页 >问答首页 >列重叠中的Bootstrap 4卡

问列重叠中的Bootstrap 4卡
EN

Stack Overflow用户

提问于 2020-06-30 05:05:47

回答 1查看 361关注 0票数 1

我正在使用Bootstrap 4制作一个产品展示页面。在全尺寸下，这些列可以正常显示，但当这些列在任何移动大小的屏幕上显示时，这些列相互重叠。我尝试了很多方法，包括将display更改为inline-block。

下面提到了代码，请帮帮我！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <!-- row 2-->
  <div class="row border ">
    <!--Col 1-->
    <div class="col-sm-3">
      <div class="card mh-100 " style="width: 18rem; height: 31rem;">
        <img class="card-img-top " style="" src="C:\Users\acer\OneDrive\Desktop\sufi.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 2-->
    <div class="col-sm-3">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top " src="C:\Users\acer\OneDrive\Desktop\ear buds.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">IPhone X</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 3-->
    <div class="col-sm-3">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" style="height:15 rem" src="C:\Users\acer\OneDrive\Desktop\bottle.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo "></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col-4-->
    <div class="col-sm-3">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" style="height:15 rem" src="C:\Users\acer\OneDrive\Desktop\bottle.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo "></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
  </div>
  <!--Row-3-->
  <div class="row border topM">
    <!--Col1-->
    <div class="col-sm-3 ">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" src="C:\Users\acer\OneDrive\Desktop\sufi.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 2-->
    <div class="col-sm-3">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" src="C:\Users\acer\OneDrive\Desktop\ear buds.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">IPhone X</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 3-->
    <div class="col-sm-3 ">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" src="C:\Users\acer\OneDrive\Desktop\bottle.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo">Time:</p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col-4-->
    <div class="col-sm-3 ">
      <div class="card mh-100" style="width: 18rem;height: 31rem">
        <img class="card-img-top" src="C:\Users\acer\OneDrive\Desktop\bottle.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo">Time:</p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-5">Buy Now!</a>
        </div>
      </div>
    </div>
  </div>
</div>

html

css

twitter-bootstrap

bootstrap-4

回答 1

Stack Overflow用户

发布于 2020-06-30 06:59:50

15和rem之间的空格将导致错误，此设置将被忽略。

I已添加到您的cols col-lg-3 col-md-4 col-sm-6中，以便ti在调整屏幕大小时响应更快。有关bootstrap spacing.

的更多信息

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <!-- row 2-->
  <div class="row border">
    <!--Col 1-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <hr>
          <p><b>Price:</b>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 2-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">IPhone X</h5>
          <hr>
          <p><b>Price:</b>200Rs</p>
          <p class="card-text demo">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 3-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo "></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col-4-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" style="height:15 rem" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo "></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
  </div>
  <!--Row-3-->
  <div class="row border topM">
    <!--Col1-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 2-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">IPhone X</h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo"></p>
          <a href="#" class="btn btn-primary">Let's Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col 3-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo">Time:</p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
    <!--Col-4-->
    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
      <div class="card mh-100">
        <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Leather Hand Bag </h5>
          <hr>
          <p><span style="font-weight:bold ;">Price:</span>200Rs</p>
          <p class="card-text demo">Time:</p>
          <a href="#" class="btn btn-primary">Lets Bid</a>
          <a href="#" class="btn btn-success ml-md-5 ml-2">Buy Now!</a>
        </div>
      </div>
    </div>
  </div>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62646659

复制

相似问题

问列重叠中的Bootstrap 4卡
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问列重叠中的Bootstrap 4卡EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问列重叠中的Bootstrap 4卡
EN