css - 需要检查这个 col-md(col-sm-4 col-md-4 col-lg-4) 说明

Question

我的网站需要 3*3 的响应式服务框。但对齐方式不正确。第一行中的每个框在第二行中都不同，最后一个框正在移动到第四行。因此需要 3*3 框类型的代码。

       <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="serviceBox_2">
                        <i class="fa fa-bell"></i>
                        <h3>Broadband Services</h3>
                        <p>Integer ultrices scelerisque nulla fringilla. 
      Praesent leo massa, ullamcorper venenatis tempor.</p>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="serviceBox_2">
                        <i class="fa fa-briefcase"></i>
                        <h3>Dedicated Leased Line</h3>
                        <p>Integer ultrices scelerisque nulla fringilla. 
     Praesent leo massa, ullamcorper venenatis tempor.</p>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="serviceBox_2">
                        <i class="fa fa-rocket"></i>
                        <h3>Dark Fibre</h3>
                        <p>Integer ultrices scelerisque nulla fringilla. 
       Praesent leo massa, ullamcorper venenatis tempor.</p>
                    </div>
                </div>
            </div>

                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="serviceBox_2">
                        <i class="fa fa-rocket"></i>
                        <h3>CCTV Installation</h3>
                        <p>Integer ultrices scelerisque nulla fringilla. 
     Praesent leo massa, ullamcorper venenatis tempor.</p>
                    </div>

            <div class="col-sm-12 col-sm-offset-12 col-xs-12 col-md-12">

                    <div class="serviceBox_2">
                        <i class="fa fa-rocket"></i>
                        <h3>CCTV Installation</h3>
                        <p>Integer ultrices scelerisque nulla fringilla. 
     Praesent leo massa, ullamcorper venenatis tempor.</p>
                    </div>

                </div>

            </div>

Answer 1

您需要为每 12 列添加一行。

此外，如果您想使用具有相同值的 sm、md 和 lg，那么您只需使用 sm。

 <div class="row">
      <div class="col-sm-4">
        <div class="serviceBox_2">
          <i class="fa fa-bell"></i>
          <h3>Broadband Services</h3>
          <p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
        </div>
      </div>
      <div class="col-sm-4 ">
        <div class="serviceBox_2">
          <i class="fa fa-briefcase"></i>
          <h3>Dedicated Leased Line</h3>
          <p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="serviceBox_2">
          <i class="fa fa-rocket"></i>
          <h3>Dark Fibre</h3>
          <p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <div class="serviceBox_2">
          <i class="fa fa-rocket"></i>
          <h3>CCTV Installation</h3>
          <p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
        </div>
      </div>
      <div class="col-sm-4">

        <div class="serviceBox_2">
          <i class="fa fa-rocket"></i>
          <h3>CCTV Installation</h3>
          <p>Integer ultrices scelerisque nulla fringilla. Praesent leo massa, ullamcorper venenatis tempor.</p>
        </div>

      </div>

    </div>