对齐divs垂直使用bootstrap

时间:2017-06-02 22:30:08

标签: html css twitter-bootstrap twitter-bootstrap-3

最后两个白色矩形div与stirringminds.com/partners

处的其他白色矩形div不对齐

HTML:

<div class="row">
<div class="container">
<div class="col-md-2 listwords" style="position:relative;top:32px;margin-bottom:50px;">
<button id="showall" class="active" style="font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;border:none;">ALL DEALS&nbsp;</button>
<button id="show" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">BUSINESS&nbsp;</button>
<button id="show2" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DESIGN&nbsp;</button>
<button id="show3" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DEVELOPMENT&nbsp;</button>
<button id="show4" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">MARKETING&nbsp;</button>
<button id="show5" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">SALES&nbsp;</button>
<button id="show6" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">SUPPORT&nbsp;</button>
<button id="show7" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">PRODUCTIVITY&nbsp;</button>
<button id="show8" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DIY&nbsp;</button>
<button id="show9" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">LEARNING&nbsp;</button>
<button id="show10" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">LIFE&nbsp;</button>
</div>

<a href="https://aws.amazon.com" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:27%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/aws_logo_web_300px.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Amazon Web Services<br><span style="color:#888;">Up to $1000 credits for 1 year.</span></div></div></a>

<a href="https://www.ameyo.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:35%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/Ameyo-emerge-logo-white.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Ameyo Emerge<br><span style="color:#888;">3 free Ameyo Emerge licenses for 3 months.</span></div></div></a>

<a href="https://www.cliklawyer.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:25%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/cl.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Clik Lawyer<br><span style="color:#888;">10% discount on all money recovery matters.</span></div></div></a>

<a href="https://cloud.google.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:18%;"><img class="dealsimg" src="http://stirringminds.com/wp-content/uploads/2017/05/gcplogo1-300x300-e1496441677297.jpg"/></div><div class="col-md-8" style="position:relative;top:15%;">Google Cloud Platform<br><span style="color:#888;">10% discount on all money recovery matters.</span></div></div></a>

<a href="https://aws.amazon.com" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:27%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/aws_logo_web_300px.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Amazon Web Services<br><span style="color:#888;">Up to $1000 credits for 1 year.</span></div></div></a>

<a href="https://www.ameyo.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:35%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/Ameyo-emerge-logo-white.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Ameyo Emerge<br><span style="color:#888;">3 free Ameyo Emerge licenses for 3 months.</span></div></div></a>

<a href="https://www.cliklawyer.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:25%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/cl.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Clik Lawyer<br><span style="color:#888;">10% discount on all money recovery matters.</span></div></div></a>

<a href="https://cloud.google.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:18%;"><img class="dealsimg" src="http://stirringminds.com/wp-content/uploads/2017/05/gcplogo1-300x300-e1496441677297.jpg"/></div><div class="col-md-8" style="position:relative;top:15%;">Google Cloud Platform<br><span style="color:#888;">10% discount on all money recovery matters.</span></div></div></a>

</div>
</div>

我如何将它们与其他人对齐?

2 个答案:

答案 0 :(得分:1)

最快的方法是添加间隔符:

<div class="col-md-2 dealsdiv">&nbsp;</div>

<div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;">
   <div class="col-xs-4" style="position:relative;top:25%;">
      <img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/cl.png">
   </div>
   <div class="col-md-8" style="position:relative;top:15%;">
      Clik Lawyer<br>
      <span style="color:#888;">
          10% discount on all money recovery matters.
      </span>
   </div>
</div>

但最好的方法是拥有3列。

一个用于导航(col-md-2),其余两列(col-md-5)将是您的内容,每行四行。

答案 1 :(得分:1)

查看您的来源 - 我看到您已将左侧框正确包裹在一列中 - 但您没有将右侧列包裹起来。他们需要总共12列。

<div class="row">
    <div class="col-md-2"> LEFT HAND CONTENT</div>
    <div class="col-md-10">All of your buttons go here</div>
</div>