ブートストラップ行が動作していません

Question

Bootstrap row col-md-4 not working properly. 最後の行を残りの行とインラインで移動させてください。ありがとうございました！昨日は大丈夫だったので、それ以来私のコードに触れていないので、何ができるのか分からない。

私は本当に助けに感謝します！あなたがしなければならないすべては彼らの終了タグとともに、余分な<div class="row">の要素を削除している、あなたはクラスcol-md-4と3つの<div> sが同じ行になりたいと仮定すると、

/*WHY*/ 
 

 
#why { 
 
\t padding:5rem 0; 
 
\t background-color:#f6f6f6; 
 
} 
 

 
#why hr { 
 
\t width:30%; 
 
} 
 

 
#why .fa { 
 
\t color:#be2835; 
 
\t padding:15px 0; 
 
}

 \t <section id="why"> 
 
    \t \t <div class="container text-xs-center"> 
 
    \t \t \t 
 
    \t \t \t <div class="row"> 
 
    \t \t \t \t <div class="col-md-12 wow fadeIn"> 
 
    \t \t \t \t \t <h2>Why work with us?</h2> 
 
    \t \t \t \t \t <hr> 
 
    \t \t \t \t \t <p>Because we are best at what we do!</p> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 

 
    \t \t \t <div class="row"> 
 
    \t \t \t \t <div class="col-md-4 wow fadeIn" data-wow-delay="0.3s"> 
 
    \t \t \t \t \t <i class="fa fa-thumbs-o-up fa-3x"></i> 
 
    \t \t \t \t \t <h3>Customer Satisfaction</h3> 
 
    \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
 
    \t \t \t \t </div> 
 

 
    \t \t \t \t <div class="row"> 
 
    \t \t \t \t \t <div class="col-md-4 wow fadeIn" data-wow-delay="0.4s"> 
 
    \t \t \t \t \t \t <i class="fa fa-line-chart fa-3x fa-3x"></i> 
 
    \t \t \t \t \t \t <h3>Instant Results</h3> 
 
    \t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t </div> 
 

 
    \t \t \t \t <div class="row"> 
 
    \t \t \t \t \t <div class="col-md-4 wow fadeIn" data-wow-delay="0.5s"> 
 
    \t \t \t \t \t \t <i class="fa fa-trophy fa-3x"></i> 
 
    \t \t \t \t \t \t <h3>Award Winning Service</h3> 
 
    \t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t </div> \t 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </section>

Answer 1

。だから、HTMLは次のようになります。

<section id="why"> 
    <div class="container text-xs-center"> 

     <div class="row"> 
      <div class="col-md-12 wow fadeIn"> 
       <h2>Why work with us?</h2> 
       <hr> 
       <p>Because we are best at what we do!</p> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-md-4 wow fadeIn" data-wow-delay="0.3s"> 
       <i class="fa fa-thumbs-o-up fa-3x"></i> 
       <h3>Customer Satisfaction</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
      </div> 

      <div class="col-md-4 wow fadeIn" data-wow-delay="0.4s"> 
       <i class="fa fa-line-chart fa-3x fa-3x"></i> 
       <h3>Instant Results</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
      </div> 

      <div class="col-md-4 wow fadeIn" data-wow-delay="0.5s"> 
       <i class="fa fa-trophy fa-3x"></i> 
       <h3>Award Winning Service</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
      </div> 
     </div> 
    </div> 
</section>