是否可以在两列网格中的每一行中只有两个项目？

Question

我在对齐两列网格中的项目时遇到一些问题。如果您查看 this picture，您会发现这些项目没有正确对齐。您会注意到 'Example 3' 与 'Example 4' 不对齐。我认为问题在于，由于 'Example 2' 没有描述，'Example 3' 占用了 'Example 2'.

上的空 space

行为应该这样，即使没有任何示例的描述，'Example 1' 也应该与 'Example 2'（第 1 行）对齐。 'Example 3' 应与 'Example 4'（第 2 行）对齐。 It should be like this.

我不确定是什么导致了这种错位。我不确定我的 bootstrap 是否有误。我正在使用 Col-sm-6 Col-md-6 。这是我的代码：

<div class="myTree">
        <div class="col-sm-6 col-md-6">
            @if(link !=null)  // if link is there, then it shoud apply to image and title.
            {
            <a href="@link.URL" title="@link.LinkName" target="@link.TargetWindow">
                <div class="content">
                    <div class="treeimagewithLink">
                        <img class="treeimage" alt="@image.GetAttributeValue("AlternateText")" title="@image.GetAttributeValue("AlternateText")" src="images/@image.Value" />
                    </div>
                    <div class="treeTitle">
                        <h3>@title</h3>
                    </div>
                </div>
            </a>
            <div class="treeexcerpt">
                <p>@Html.Raw(Model.GetElementValue("description"))</p>
            </div>
            }
            else{ // if there is no link 
            <div class="imagewithnoLink">
                <img class="treeimage" alt="@image.GetAttributeValue("AlternateText")" title="@image.GetAttributeValue("AlternateText")" src="images/@image.Value" />
            </div>
            <div class="treeTitle">
                <h3>@title</h3>
            </div>
            <div class="treeexcerpt">
                <p>@Html.Raw(Model.GetElementValue("description"))</p>
            </div>
            }
        </div>
    </div>

Answer 1

您需要将 class row 添加到 myTree。

这将导致 myTree 获得 display: flex。

编辑：好的。看起来您的 col-md-6 上显然有 float，这可能意味着您使用的是 bootstrap v3，而不是 v4。（Bootstrap v3 使用 float 而不是 flexbox。）

因此我建议手动添加一些 flexbox。

CSS:

.myTree{
    display:flex;
    flex-wrap:wrap;
}

.myTree>.col-md-6{
   flex:1 1 auto;
}

@media (max-width:767px){
    .myTree>.col-md-6{
        width:100%;
    }
}

如果你想让它在你的整个网站上更加全球化，你可以完全覆盖 bootstrap，像这样：

.row{
    display:flex;
    flex-wrap:wrap;
}

[class*=col-]{
    flex: 1 1 auto;
}

@media (max-width:767px){
    [class*=col-]:not([class*="col-xs"]){
        width:100%;
    }
}

编辑 2：我刚刚意识到您的 HTML 可能确实是问题所在。您的最终结果可能如下所示：

<div style="display:flex; flex-wrap:wrap;">
    <div class="myTree col-sm-6 col-md-6">
        ...
    </div>
    <div class="myTree col-sm-6 col-md-6">
        ...
    </div>
    <div class="myTree col-sm-6 col-md-6">
        ...
    </div>
    <div class="myTree col-sm-6 col-md-6">
        ...
    </div>
</div>

.myTree{
   flex:1 1 auto;
}

@media (max-width:767px){
    .myTree{
        width:100%;
    }
}

Answer 2

将 <div class="myTree"> 更改为 <div class="row"> 然后在底部 class="row" 添加 <div class="col-**"> 后添加 <div class="myTree">

是否可以在两列网格中的每一行中只有两个项目？

Is it possible to have only two items in each row in a two column grid?

html

css

twitter-bootstrap

twitter-bootstrap-3