css - Bootstrap 导航栏 CSS

Question

我无法正确对齐我的页面。似乎无论我做什么，这些行都不会按照我希望的方式对齐。图片与主 img 未对齐，或者这些图片下方的标题未正确对齐。

我希望箭头与 services/faq/contact 处于同一层级，并且它们下方的段落向左对齐。但是，如果不在 10 个不同的地方使用边距，我似乎无法实现这一目标。

http://www.bootply.com/bilUlNXdnE

http://i.imgur.com/vnE3N3U.jpg

Answer 1

好吧，这不仅仅是一个答案，我只是想 Bootstrap 您朝着正确的方向前进..

我看到您为标题、箭头和描述创建了单独的 div。我认为这不是正确的做法。相反，您可以为列(包括标题、图像、箭头和描述)制作一个 div。

您的代码:

<div class="row " id="icons">
  <div class="col-md-4">
    <img src="img/bottle.gif" class="image-responsive " id="spray" width="300" alt="" height="240">      
  </div><!--/#Spray-->   

  <div class="col-md-4">
    <img src="img/vacuum.gif" class="image-responsive " id="vacuum" width="300" alt="" height="240">      
  </div><!--/#Vacuum--> 

  <div class="col-md-4">
    <img src="img/mop.gif" class="image-responsive " id="mop" alt="" width="300" height="240">      
  </div><!--/#Mop-->
</div>


<div class="row" id="captions">
  <div class="col-md-4">
    <h3>Services</h3>
  </div>
  <div class="col-md-4">
    <h3>FAQ</h3>
  </div>
  <div class="col-md-4">
    <h3>Contact</h3>
  </div>
</div>


<div class="row" id="arrows">
  <div class="col-md-4">
    <img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18">      
   </div>

  <div class="col-md-4">
    <img src="img/arrow8.gif" class="image-responsive" id="arrow2" alt="" width="18" height="18">
   </div>

  <div class="col-md-4">
    <img src="img/arrow8.gif" class="image-responsive" id="arrow3" alt="" width="18" height="18">
  </div>
</div>


<div class="row" id="blurbs">
  <div class="col-md-4" id="blurb1">      
    <div class="services"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
  </div><!--/#Spray-->   

  <div class="col-md-4" id="blurb2">      
    <div class="FAQ"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
  </div><!--/#Vacuum--> 

  <div class="col-md-4" id="blurb3">      
    <div class="contact"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
  </div><!--/#Mop--> 
</div>

这是处于相同上下文中的元素之间的松散耦合(例如标题、图像、描述等)。

我建议你编写这样的代码 -

<div class="col-md-4">
   <img src="img/bottle.gif" class="image-responsive " id="spray" width="300" alt="" height="240"> 
   <div class="row">
      <div class="col-md-8">
         <h3>FAQ</h3>
      </div>
      <div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18">  </div>
   </div>
   <div class="services">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
   </div>
</div>
<!--/#Column1-->   


<div class="col-md-4">
   <img src="img/vacuum.gif" class="image-responsive " id="spray" width="300" alt="" height="240"> 
   <div class="row">
      <div class="col-md-8">
         <h3>FAQ</h3>
      </div>
      <div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18">  </div>
   </div>
   <div class="FAQ">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
   </div>
</div>
<!--/#Column2-->  


<div class="col-md-4">
   <img src="img/mop.gif" class="image-responsive " id="spray" width="300" alt="" height="240"> 
   <div class="row">
      <div class="col-md-8">
         <h3>FAQ</h3>
      </div>
      <div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18">  </div>
   </div>
   <div class="contact">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
   </div>
</div>
<!--/#Column3-->

这样一来，您就不必玩太多 margin 之类的东西了..

编辑示例:http://www.bootply.com/ZnylDYHd6x