Bootstrap 3網格問題Firefox未對准

Question

我在Firefox中基於引導程序的布局遇到問題。

發生的情況是，當存在多行時，這些行將向右過渡，但是在Chrome和IE11中卻沒有這樣做。

在Firefox中的外觀截圖> http://i.imgur.com/GJEClw9.png

在Chrome / IE11中的外觀截圖> http://i.imgur.com/baxNdJa.png

這是我的CSS / HTML

 .forumNavigation a:link, a:visited, a:hover, a:active { color: #000; text-decoration: none; } /* Category headers */ .catHeader { background-image: url(../../assets/img/bg.png); background-repeat: repeat; font-size: 14px; font-weight: bold; color: #fff; line-height: 40px; padding-left: 30px; } .catHeader a { color: #fff; text-decoration: none; } /* Forum table borders to save space */ .forumTitleBlock, .forumReplyBlock, .forumlastPostInfo { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; vertical-align: middle; padding-top:8px; padding-bottom:8px; } .postIcon, .forumsLeftBlock, .forumStats { border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; vertical-align: middle; } /* Columns of same height styles (Part of the above Forum styles) */ .row-same-height { display: table; width: 100%; } .col-md-height { display: table-cell; float: none !important; } /* Padding below each category */ .blank { padding:10px; } /* Forum Statistics Section */ .forumStats { padding-top:7px; padding-bottom:5px; } 

 <div class="row"> <div class="col-md-6 animated" data-animation="fadeInUp" data-animation-delay="900"></div> <div class="col-md-12 form-element animated" data-animation="fadeInUp" data-animation-delay="1200"> <div class="row"> <div class="col-md-12 forumContainer"> <div class="col-md-6 forumNavigation">Forum</div> <div class="col-md-6 forumMessages text-right">Messages</div> </div> </div> <div class="row"> <div class="col-md-12 catHeader" id="catHeader"><a href="#">Categories</a><a data-toggle="collapse" data-parent="catHeader" href="#coll-1" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a></div> <div class="collapse in" id="coll-1"> <div class="row-same-height"> <div class="col-md-1 col-md-height forumsLeftBlock">icon</div> <div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br />&nbsp;&nbsp;<small>test subtitle</small></div> <div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div> <div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div> </div> <div class="row-same-height"> <div class="col-md-1 col-md-height forumsLeftBlock">icon</div> <div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br />&nbsp;&nbsp;<small>test subtitle</small></div> <div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div> <div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div> </div> </div> </div> <div class="blank"></div> <div class="row"> <div class="col-md-12 catHeader text-center" id="statsHeader">Forum Statistics<a data-toggle="collapse" data-parent="statsHeader" href="#stats" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a></div> <div class="collapse in" id="stats"> <div class="col-md-12 forumStats text-center">Topics: | Posts: | Members: </div> </div> </div> </div> </div> 

Answer 1

Jey寫完之后，我將代碼重寫為以下內容

 <div class="row forumContainer"> <div class="col-md-8 forumNavigation">Forum</div> <div class="col-md-4 forumMessages text-right">Messages</div> </div> <div class="row"> <div class="col-md-12 catHeader" id="catHeader"><a href="#">Categories</a> <a data-toggle="collapse" data-parent="catHeader" href="#coll-1" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a> </div> </div> <div class="collapse in" id="coll-1"> <div class="row"> <div class="row-same-height"> <div class="col-md-1 col-md-height forumsLeftBlock">icon</div> <div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br />&nbsp;&nbsp;<small>test subtitle<?php echo $forum['subtitle']; ?></small></div> <div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div> <div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div> </div> </div> <div class="row"> <div class="row-same-height"> <div class="col-md-1 col-md-height forumsLeftBlock">icon</div> <div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br />&nbsp;&nbsp;<small>test subtitle<?php echo $forum['subtitle']; ?></small></div> <div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div> <div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div> </div> </div> </div> <div class="blank"></div> <div class="row"> <div class="col-md-12 catHeader text-center" id="statsHeader">Forum Statistics<a data-toggle="collapse" data-parent="statsHeader" href="#stats" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a></div> </div> <div class="row"> <div class="collapse in" id="stats"> <div class="col-md-12 forumStats text-center">Topics: 1234 | Posts: 5678 | Members: 1234</div> </div> </div>