html - Bootstrap 3 网格问题 Firefox 未对齐

Question

我在 Firefox 中遇到基于 Bootstrap 的布局问题。

发生的事情是，当有多行时，行会向右过渡，但在 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>