Question

我是使用Bootstrap的新手，并希望创建一个响应式布局，为我的帖子并排放置2列。 Example

我想实现在Portfolio下看到的2列安排。我查看了源代码，看到了似乎没有包含在标准Bootstrap中的各种类。我正在使用VS2013中MVC6项目附带的Bootstrap版本。任何帮助或推动正确的方向是值得赞赏的。

我的约会尝试导致this发生。我最终得到了这个差距。

这是导致间隙发生的MVC代码：

    <div class="container">    
    @For Each item In Model.ToList         
            @<div class="col-md-6">
                <div class="item">
                    <div class="content">
                        @Html.Raw(GetImageHelper.getImage(True, item.PostSummary))
                        <h3>
                            @item.PostTitle
                        </h3>
                        @Html.Raw(item.PostSummary.StripStyle)    
                    </div>
                </div>    
            </div>    
       Next
</div>

谢谢

Answer 1

看起来你没有正确使用清算。我对该问题的解决方案是使用bootstrap row类。以下示例还支持响应：

<div class="row">
    <div class="col-md-6 col-xs-12"></div>
    <div class="col-md-6 col-xs-12"></div>
</div>
<div class="row">
    <div class="col-md-6 col-xs-12"></div>
    <div class="col-md-6 col-xs-12"></div>
</div>
...

Answer 2

这是一个不平等的高度问题。 Float试图尽可能地填充可用区域，但是当你有一个比另一个更高的列时，它会将下一个浮动对象向右推一点。虽然@luke是正确的，你可以清除每一行来解决问题，但这也会破坏你网站的响应能力，因为现在每行只能有两行或更少。对于这个特定的例子，这可能不是问题。你有一个最初的偶数列，对于非常小的屏幕你可以缩小到每行一个。但是在其他情况下，例如想要在漂亮的宽屏显示器中每行三个，你就会失去运气。

您可能希望在Bootstrap 3 Responsive Columns of Same Height上查看文章Minimit。

使用Bootstrap，如何为内容创建2列？ - 包括的例子

2 个答案: