如何在Bootstrap行中具有多个列 [英] How to have multiple Columns in Bootstrap row
问题描述
我正在使用Bootstrap3.我有一行将容纳可变数量的列，范围从1个字母的9.
I am using Bootstrap 3. I have one row that will hold a variable amount of columns, ranging from 1-let's say 9.
当前设置为col-lg-4，因此应在一行上显示三个.我通常会创建一个新行，但是由于我正在动态添加列，因此我无法做到这一点，或者至少不知道如何做.
The are currently set to col-lg-4, so three should display on one row. I would normally create a new row, but since I am dynamically adding columns, I cannot do this, or at least do no know how.
我的客户添加帖子时，它会自动创建一个包含内容的列.
When my client adds a post, it automatically creates a column with content.
问题仅出在Firefox& IE，无论是在桌面视图还是在移动视图中.第4项(或应移至下一行的第1项)被推到新行并偏移.请参见下面的屏幕截图.
The problem lies only in Firefox & IE, in both desktop and mobile views. The 4th item (or 1st item that should go to the next row) gets pushed to a new line and is offset. See screenshot below.
我正在使用ExpressionEngine作为CMS.
I am using ExpressionEngine as my CMS.
它在Chrome中完美显示.
It displays perfectly in Chrome.
下面的代码
<div class="container">
<div class="row">
{exp:channel:entries channel="plans" orderby="title" sort="asc"}
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 centered">
<div class="grid mask">
<figure>
<img class="img-responsive" src="{plan_main_image}">
<figcaption>
<h5>{title}</h5>
<a data-toggle="modal" href="#{url_title}" class="btn btn-primary btn-lg">View Floor Plan</a>
</figcaption>
</figure>
</div>
</div>
<div class="modal fade" id="{url_title}" tabindex="-1" role="dialog" aria-labelledby="{url_title}" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{title}</h4>
</div>
<div class="modal-body text-left">
<div class="row">
<div class='list-group gallery'>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_main_image}">
<img class="img-responsive" alt="" src="{plan_main_image}" />
</a>
</div>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_first_level}">
<img class="img-responsive" alt="" src="{plan_first_level}" />
</a>
</div>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_second_level}">
<img class="img-responsive" alt="" src="{plan_second_level}" />
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
{plan_description}
</div>
</div>
<!--<div class="row">
<div class="col-lg-12">
<b><a href="{plan_floor_plan_pdf}" download="{plan_floor_plan_pdf}">Download the floor plan</a></b>
</div>
</div>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{/exp:channel:entries}
</div><!-- /row -->
<br>
<br>
</div><!-- /row -->
</div><!-- /container -->
谢谢
推荐答案
其原因是因为第一个图像比其他图像稍高.您需要为此使用响应列重置.请参阅文档中的响应列重置.
The reason for this is because the first image is slightly taller than the other images. You need to use a responsive column reset for this. See Responsive Column Resets in the doc.
基本概念是在每个包含clearfix的水平分组之后添加一个div，以便在下一个水平分组之前被清除并正确对齐.
The basic concept is to add a div after the each horizontal grouping that contains a clearfix so that the next horizontal grouping is cleared before and aligns correctly.
对于更复杂的情况，您可以在这里看到我的答案: Bootstrap堆叠行中的间隙.
For more complex scenarios you can see my answer here: Gap in Bootstrap stacked rows.
这篇关于如何在Bootstrap行中具有多个列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
