Question

我无法正确对齐页面。似乎无论我做什么，没有一行符合我希望他们的方式。如果图像没有从主img或下面的标题未对齐，那些图像就不能正确排列。

我希望箭头与services / faq / contact处于同一级别，并且下面的段落与左侧对齐。但是，如果不在10个不同的地方玩边缘，我似乎无法做到这一点。

http://www.bootply.com/bilUlNXdnE

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

Answer 1

嗯，这不仅仅是一个答案，但我只想引导你走向正确的方向..

我看到你为标题，箭头和描述创建了单独的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-->

这样一来，你不必玩边缘和东西......

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

Bootstrap导航栏css

1 个答案: