为什么我输入 6 列，div 却占据 12 列？

Question

我正在尝试使用 col-5 将 4 个 div 分成两列。但当屏幕尺寸变小时，所有 4 个 div 都会占据 12 列，而不是每个 5 列，从而形成一个完整的列。

我是编码和引导新手！非常抱歉新手的错误......

这是我的代码：

<section id="tools" class="container-fluid" >
        <div class="row  mt-5 text-center">
          <h1 class="col-12">Tools </h1>
        </div>

        <div class="row d-flex flex-row justify-content-center align-items-center ">
         <div class="row d-flex justify-content-center align-items-center" >
            <div class="col-5 col-lg-2 card d-flex justify-content-center align-items-center m-3">
              <img src="./images/html.png" class="img-fluid" >
            </div>
            <div class="col-5 col-lg-2 card d-flex justify-content-center align-items-center m-3">
              <img src="./images/html.png" class="img-fluid" >
            </div>
            <div class=" col-5 col-lg-2 card d-flex justify-content-center align-items-center m-3">
              <img src="./images/html.png" class="img-fluid" >
            </div>
            <div class="col-5 col-lg-2 card d-flex justify-content-center align-items-center m-3">
              <img src="./images/html.png" class="img-fluid" >
            </div>
         </div>

          <div class="row d-flex justify-content-center align-items-center" >
            <div class="col-5 col-lg-2 card d-flex justify-content-center align-items-center m-3">
              <img src="./images/html.png" class="img-fluid" >
            </div>
            <div class="col-5 col-lg-2 card d-flex justify-content-center align-items-center m-3">
              <img src="./images/html.png" class="img-fluid" >
            </div>
            <div class=" col-5 col-lg-2 card d-flex justify-content-center align-items-center m-3">
              <img src="./images/html.png" class="img-fluid" >
            </div>
            <div class="col-5 col-lg-2 card d-flex justify-content-center align-items-center m-3">
              <img src="./images/html.png" class="img-fluid" >
            </div>
          </div>
        </div>
</section>

感谢您的帮助！

Answer 1

使用类

col-xs-6

来实现

divs

，您希望它们成为小型设备上屏幕的一半

xs

表示超小型设备，例如移动设备。

<div class="col-5 col-xs-6 col-lg-2 card d-flex justify-content-center align-items-center m-3">