html - 移动屏幕上同一行的两张卡

Question

此代码在桌面视图上运行良好。所有 4 张卡片都显示在同一行。但我想在手机屏幕上的同一行有两张卡，但它会在另一张卡下面-

<div class="container p-3 my-3">
      <h2 class="text-center">Friendship Quiz</h2>
      <div id="quiz">
        <p class="text-center lead" id="question">What is one thing/activity that makes you relax?</p>
        <div class="row justify-content-center" >
          <div class="col-sm-2 mb-3">
            <div class="card text-center">
              <div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5acf6d014cc.jpg" alt="Card image" style="width: 120px;"></div>
              <div class="card-body">
                <a href="#" id="btn0" class="card-title stretched-link text-decoration-none lead"><span id="choice0"></span></a>
              </div>
            </div>
          </div>
          <div class="col-sm-2 mb-3">
            <div class="card text-center">
              <div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5ad13063a48.jpg" alt="Card image"  style="width: 120px;"></div>
              <div class="card-body">
                <a href="#" id="btn1" class="card-title stretched-link text-decoration-none lead"><span id="choice1"></span></a>
              </div>
            </div>
          </div>
          <div class="col-sm-2 mb-3">
            <div class="card text-center">
              <div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5ad1857e9f8.jpg" alt="Card image"  style="width: 120px;"></div>
              <div class="card-body">
                <a href="#" id="btn2" class="card-title stretched-link text-decoration-none lead"><span id="choice2"></span></a>
              </div>
            </div>
          </div>
          <div class="col-sm-2 mb-3">
            <div class="card text-center">
              <div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5acfb4ef90f.jpg" alt="Card image" style="width: 120px;"></div>
              <div class="card-body">
                <a href="#" id="btn3" class="card-title stretched-link text-decoration-none lead"><span id="choice3"></span></a>
              </div>
            </div>
          </div>
        </div>

`

标签： htmltwitter-bootstrapbootstrap-4

Answer 1

您可以将此引导类添加到每张卡。例如col-xs-6，它的意思是特小，这是针对移动版本的。

 <div class="col-sm-2 col-xs-6 mb-3">
         // rest of your code
    </div>