html - 使用 bootstrap 垂直对齐 div

Question

最后两个白色矩形 div 在 stirringminds.com/partners 处未与其他矩形对齐

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>

我怎样才能使他们与其他人保持一致？

Answer 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>