このcol-md（col-sm-4 col-md-4 col-lg-4）の浄化を確認する必要があります

Question

私はresponsive.Butアライメントで私のウェブサイトの3 * 3サービスボックスが必要です。 1行目は2行目で異なり、最後のボックスは4行目に移動しています.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>