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

Question

我在对齐两列网格中的项目时遇到了一些问题。如果您查看this picture，您会发现这些项目没有正确对齐。您会注意到“示例 3”与“示例 4”不一致。我认为问题在于，由于“示例 2”没有描述，“示例 3”占据了“示例 2”的空白区域。

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

我不确定是什么导致了这种错位。我不确定我的引导程序是否错误。我正在使用 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

您需要将row 类添加到myTree。

这将导致myTree 获得display: flex。

编辑：好的。看起来您的col-md-6 上显然有float，这可能意味着您使用的是引导程序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%;
    }
}

---

如果您想让整个网站更加全球化，您可以完全覆盖引导程序，如下所示：

.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">