Css 需要检查此col md（col-sm-4 col-md-4 col-lg-4）澄清_Css_Html_Twitter Bootstrap_Responsive Design

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

css html twitter-bootstrap responsive-design

Css 需要检查此col md（col-sm-4 col-md-4 col-lg-4）澄清,css,html,twitter-bootstrap,responsive-design,Css,Html,Twitter Bootstrap,Responsive Design,我需要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>

我需要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>


宽带服务
Integer ultrices scelerisque nulla fringilla。
利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
专用专线
Integer ultrices scelerisque nulla fringilla。
利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
暗纤维
Integer ultrices scelerisque nulla fringilla。
利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
闭路电视安装
Integer ultrices scelerisque nulla fringilla。
利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
闭路电视安装
Integer ultrices scelerisque nulla fringilla。
利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师

您错误地关闭了倒数第二个div，使最后一个div成为它的子div。此外，引导程序还提供了一个在生成行时非常有用的方法

<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>


宽带服务
Integer ultrices scelerisque nulla fringilla。利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
专用专线
Integer ultrices scelerisque nulla fringilla。利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
暗纤维
Integer ultrices scelerisque nulla fringilla。利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
闭路电视安装
Integer ultrices scelerisque nulla fringilla。利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
闭路电视安装
Integer ultrices scelerisque nulla fringilla。利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师

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


宽带服务
Integer ultrices scelerisque nulla fringilla。利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
专用专线
Integer ultrices scelerisque nulla fringilla。利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
暗纤维
Integer ultrices scelerisque nulla fringilla。利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
闭路电视安装
Integer ultrices scelerisque nulla fringilla。利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师
闭路电视安装
Integer ultrices scelerisque nulla fringilla。利奥·马萨，乌兰科珀·维尼纳蒂斯临时牧师