垂直对齐列与引导程序

Question

我columns中有3 row。第一个和第二个更宽，第三个更窄，需要只包括一个购买按钮和价格。这就是它在这一点上的看法：

我需要将最右边的column与其他css class对齐。尝试了一堆在这里建议的组合，但似乎没有工作。这是我的.vertical-align { flex-direction: row; display: inline-block; vertical-align: middle; float: none; } ：

row

编辑：我添加了整个<div class="row bottom-buffer15 searchresultbg"> <!-- product image column --> <div class="col-xs-12 col-sm-3 col-md-3" style="border:1px solid red"> <a href='#{product.itemUrl}' target="_blank"><img src='#{product.thumbnailUrl}' /></a> <br/> </div> <!-- product details column --> <div class="col-xs-12 col-sm-6 col-md-6" style="border:1px solid red"> <a href='#{product.itemUrl}' target="_blank">#{searchResults.getTruncatedTitle(product)}</a> <br/><br/> <h:panelGroup rendered="#{searchResults.isEbay(product)}"> Sale Type: #{product.saleType} <br/> Bids: #{product.numberOfBids} <br/> Time: #{product.timeLeft} <br/> </h:panelGroup> <!-- site logo --> <h:panelGroup rendered="#{searchResults.isEbay(product)}"> <h:graphicImage library="images" name="ebaylogo.jpg" width="40" /> </h:panelGroup> <h:panelGroup rendered="#{searchResults.isAmazon(product)}"> <h:graphicImage library="images" name="amazonlogo.jpg" width="40" /> &nbsp; </h:panelGroup> <h:panelGroup rendered="#{searchResults.isEtsy(product)}"> <h:graphicImage library="images" name="etsylogo.jpg" width="30" /> &nbsp; </h:panelGroup> </div> <div class="col-xs-12 col-sm-3 col-md-3 vertical-align" style="border:1px solid red;"> <a href='#{product.itemUrl}' target="_blank"> <h:graphicImage name="images/buybutton.jpg" class="img-responsive" style="display: inline-block; margin-left:0px; margin-bottom:-0px;"/> </a> <br/> #{product.currentPrice} </div> </div> ：

JFiddle

我做错了什么？

EDIT2：{!! Form::open(array('url'=>'url_to_controller','method'=>'POST', 'files'=>true)) !!} linke：http://jsfiddle.net/pc1Lwu0b/

Answer 1

为第三列添加边距，因为您有一个固定的高度。这个解决方案可行。

.vertical-align {
   margin-top: 1.5em;
}