2017-04-12 68 views
0

Bootstrap row col-md-4 not working properly. 请帮助我将最后一行与其余行内联移动。谢谢!昨天很好,所以我不知道它是什么,因为从那时起我还没有碰过我的代码。自举行不起作用

我真的很感谢帮助!

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

+0

你发3倍的第二最后一排写入两次反正...可能无关您的问题 –

回答

1

假设你想三个<div> s的col-md-4类是在同一行中,所有你需要做的就是删除多余<div class="row">元素,用他们的结束标记一起。因此,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> 
+0

这个固定对我来说,我真的很感激! –

+0

非常欢迎! –