0
У меня проблема с компоновкой, основанной на загрузке в Firefox.Bootstrap 3 grid issues Неправильное выравнивание 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 {
\t color: #000;
\t text-decoration: none;
}
/*
\t Category headers
*/
.catHeader {
\t background-image: url(../../assets/img/bg.png);
\t background-repeat: repeat;
\t font-size: 14px;
\t font-weight: bold;
\t color: #fff;
\t line-height: 40px;
\t padding-left: 30px;
}
.catHeader a {
\t color: #fff;
\t text-decoration: none;
}
/*
\t Forum table borders to save space
*/
.forumTitleBlock,
.forumReplyBlock,
.forumlastPostInfo {
\t border-right: 1px solid #ccc; \t
\t border-bottom: 1px solid #ccc;
vertical-align: middle;
\t padding-top:8px;
\t padding-bottom:8px;
}
.postIcon,
.forumsLeftBlock,
.forumStats {
\t border-left: 1px solid #ccc;
\t border-right: 1px solid #ccc;
\t border-bottom: 1px solid #ccc; \t
\t vertical-align: middle; \t
}
/*
\t 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;
}
/*
\t Padding below each category
*/
.blank {
\t padding:10px;
}
/*
\t Forum Statistics Section
*/
.forumStats {
\t padding-top:7px;
\t padding-bottom:5px;
}<div class="row">
\t <div class="col-md-6 animated" data-animation="fadeInUp" data-animation-delay="900"></div>
\t <div class="col-md-12 form-element animated" data-animation="fadeInUp" data-animation-delay="1200">
\t \t <div class="row">
\t \t \t <div class="col-md-12 forumContainer">
\t \t \t <div class="col-md-6 forumNavigation">Forum</div>
\t \t \t <div class="col-md-6 forumMessages text-right">Messages</div>
\t \t \t </div>
\t \t </div>
\t \t <div class="row"> \t
\t \t \t <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>
\t \t \t <div class="collapse in" id="coll-1">
\t \t \t \t <div class="row-same-height">
\t \t \t \t \t <div class="col-md-1 col-md-height forumsLeftBlock">icon</div>
\t \t \t \t \t <div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br /> <small>test subtitle</small></div>
\t \t \t \t \t <div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div>
\t \t \t \t \t <div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div>
\t \t \t \t </div>
\t \t \t \t <div class="row-same-height">
\t \t \t \t \t <div class="col-md-1 col-md-height forumsLeftBlock">icon</div>
\t \t \t \t \t <div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br /> <small>test subtitle</small></div>
\t \t \t \t \t <div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div>
\t \t \t \t \t <div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="blank"></div>
\t \t <div class="row">
\t \t \t <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>
\t \t \t <div class="collapse in" id="stats">
\t \t \t \t <div class="col-md-12 forumStats text-center">Topics: | Posts: | Members: </div>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
ничего себе ... что беспорядок, я могу предоставить вам альтернативный способ сделать то же самое? – user3632930
Как это беспорядок, когда его вложенная сетка? http://getbootstrap.com/css/#grid-nesting И я не хочу использовать таблицы, весь сайт построен вокруг загрузочной темы. – sford999
@ sford999 Я не могу сказать, устранит ли это вашу проблему, но в любом случае вы неправильно используете системную сетку. Система сетки Twitters ожидает 12 столбцов на строку (включая смещения). В первой строке вы пытаетесь использовать 18, если ваши намерения установлены правильно ('col-md-6' плюс' col-md-12'). В вашей первой вложенной строке вы пытаетесь использовать 24 ('col-md-12' плюс' col-md-6' плюс 'col-md-6'). И так далее ... Начните с исправления этих ошибок, и у вас есть хорошая вероятность, что ваш код генерирует нужный вам результат в каждом браузере. –