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

Question

我正在为在线购物网站开发响应式列布局。我想使用Bootstrap4在大屏幕和移动屏幕中的2列渲染5列。低于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>

Answer 1

你需要使用这个，如果你想在md和更多...

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

但是：ぁzxswい