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

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

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

您可能想查看Minimit 上的文章Bootstrap 3 Responsive Columns of Same Height。

Answer 2

您似乎没有正确使用清除。我对该问题的解决方案是使用引导程序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>
...