Question

我在制作引导卡时遇到了一些问题，以响应460px至700px的宽度范围。我想使用bootstrap命令col-12或col-sm-12使它们一个接一个，但是它们不起作用。

<!--FEATURE-->
        <div id="features" class="container-fluid features-container">
            <h1 class="features">Features</h1>
            <div class="card-deck">
                <div class="card">
                    <img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
                    <div class="card-body">
                        <h5 class="card-title">CARDIO</h5>
                        <p><strong class="price">$49.99</strong>/Month</p>
                        <p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
                <div class="card">
                    <img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
                    <div class="card-body">
                        <h5 class="card-title">STRENGTH</h5>
                        <p><strong class="price">$24.99</strong>/Month</p>
                        <p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
                <div class="card">
                    <img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
                    <div class="card-body">
                        <h5 class="card-title">PILATES</h5>
                        <p><strong class="price">$39.99</strong>/Month</p>
                        <p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
        </div>

Answer 1

我认为卡类的某些属性可能会干扰正常的列断点。我将每个card元素放置在一个包含列类的div内，并将行类添加到card-deck元素中。该代码段显示该行有3列，当小于768px时，它会中断为1列，这是中等的断点：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div id="features" class="container-fluid features-container">
  <h1 class="features">Features</h1>
  <div class="card-deck row">
    <div class="col-12 col-md-4">
      <div class="card">
        <img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
        <div class="card-body">
          <h5 class="card-title">CARDIO</h5>
          <p><strong class="price">$49.99</strong>/Month</p>
          <p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 3 mins ago</small>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card">
        <img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
        <div class="card-body">
          <h5 class="card-title">STRENGTH</h5>
          <p><strong class="price">$24.99</strong>/Month</p>
          <p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 3 mins ago</small>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card">
        <img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
        <div class="card-body">
          <h5 class="card-title">PILATES</h5>
          <p><strong class="price">$39.99</strong>/Month</p>
          <p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 3 mins ago</small>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

如何使用引导程序来修复我的卡以做出响应？

1 个答案: