使用 Bootstrap 4 在大屏幕中呈现响应式 5 列布局和在移动屏幕中呈现 2 列布局？答案

【问题标题】：To render responsive 5 column layout in big screen and 2 column layout in mobile screen using Bootstrap 4?使用 Bootstrap 4 在大屏幕中呈现响应式 5 列布局和在移动屏幕中呈现 2 列布局？
【发布时间】：2018-03-06 00:04:22
【问题描述】：

我正在为在线购物网站开发响应式列布局。我想使用 Bootstrap4 在大屏幕中渲染 5 列和在移动屏幕中渲染 2 列。在 576px 以下，只有一列全屏呈现，而不是两列。我如何解决它？我尝试插入 .d-block .d-sm-none 类，但它没有正确呈现。我已将代码附加到相同的位置。

<div class="container">
  <div class="card-deck">
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe7.png" alt="adidas 1">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>It is inspired by two icons of big Air: the Air Max 180</h5>
      </div>
    </div>
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe6.png" alt="Card image cap">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>Vostro winner sports shoes for gents</h5>
      </div>
    </div>
    <div class="d-block d-sm-none">
      <!-- wrap every 2 on xs-->
    </div>
    <div class="w-100 d-none d-sm-block d-md-none">
      <!-- wrap every 2 on sm-->
    </div>
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe9.png" alt="Card image cap">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>With a textured upper that flaunts a perforated effect</h5>
      </div>
    </div>
    <div class="w-100 d-none d-md-block d-lg-none">
      <!-- wrap every 3 on md-->
    </div>
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe10.png" alt="Card image cap">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5> Pure adidas heritage with modern materials</h5>
      </div>
    </div>
    <div class="d-block d-sm-none">
      <!-- wrap every 2 on xs-->
    </div>
    <div class="w-100 d-none d-sm-block d-md-none">
      <!-- wrap every 2 on sm-->
    </div>
    <div class="w-100 d-none d-lg-block d-xl-none">
      <!-- wrap every 4 on lg-->
    </div>
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe1.png" alt="Card image cap">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>Inspired by the popular Gatorade flavor</h5>
      </div>
    </div>
    <div class="w-100 d-none d-xl-block">
      <!-- wrap every 5 on xl-->
    </div>
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe8.png" alt="Card image cap">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>This features floating laces and a welded heel piece</h5>
      </div>
    </div>
    <div class="d-block d-sm-none">
      <!-- wrap every 2 on xs-->
    </div>
    <div class="w-100 d-none d-sm-block d-md-none">
      <!-- wrap every 2 on sm-->
    </div>
    <div class="w-100 d-none d-md-block d-lg-none">
      <!-- wrap every 3 on md-->
    </div>
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe3.png" alt="Card image cap">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>Adidas Originals Hu Pharrell Williams' sock-like knit</h5>
      </div>
    </div>
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe4.png" alt="Card image cap">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>Stone-cracked reflective mesh upper with pigskin</h5>
      </div>
    </div>
    <div class="d-block d-sm-none">
      <!-- wrap every 2 on xs-->
    </div>
    <div class="w-100 d-none d-sm-block d-md-none">
      <!-- wrap every 2 on sm-->
    </div>
    <div class="w-100 d-none d-lg-block d-xl-none">
      <!-- wrap every 4 on lg-->
    </div>
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe5.png" alt="Card image cap">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>Women Soft Leather Breathable Comfy Flats</h5>
      </div>
    </div>
    <div class="w-100 d-none d-md-block d-lg-none">
      <!-- wrap every 3 on md-->
    </div>
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe2.png" alt="Card image cap">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>Limnos CAT 3 IDP Shoes. Black-Barbados Cherry.</h5>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html twitter-bootstrap css bootstrap-4

【解决方案1】：

如果您想要在md 及以上有 5 张卡片，则需要使用它...

<div class="w-100 d-none d-md-block">
    <!-- wrap every 5 over md -->
</div>

而且，这每 2 卡...

<div class="w-100 d-block d-md-none">
    <!-- wrap every 2 under md -->
</div>

而且，防止在xs 宽度上堆叠成 1 列的唯一方法是像这样覆盖 Bootstrap 卡片组...

@media (max-width:576px){
    .card-deck .card {
        flex: 1 0 0%;
        margin-left: 15px;
        margin-right: 15px;
    }
}

演示：https://www.codeply.com/go/dM24G9jdal

【讨论】：