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

你正在关闭第二个到最后一个div错误，使最后一个div成为它的一个孩子。此外，Bootstrap提供了row class，在制作行时可以提供帮助。

<div class="container">
    <div class="row">
        <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="row">
        <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>
        <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>
</div>

Answer 2

您需要为每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>

需要检查此col-md（col-sm-4 col-md-4 col-lg-4）澄清

2 个答案: