可折叠 div 折叠时正在移动其他项目，并且它适用于循环中的一个项目

Question

我正在从数据库中提取数据并使用 foreach 循环遍历每个项目，返回数据但折叠视图仅适用于第一项，当第一项折叠时第三项移动。这是我在 HTML 视图中的代码：

<div class="content-side col-md-8 col-sm-12 col-xs-12">
    @{
        foreach (var news in Model) {
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="single-item  wow fadeInUp animated animated animated animated">
                    <div class="img-box">
                        <div class="img-holder">
                            <figure><a href="#"><img src="@news.file.Url" alt=""></a></figure>
                        </div>
                    </div>
                    <div class="news-content">
                        <h4><a href="#">@news.Header</a></h4>
                           <div class="collapse" id="collapseExample">
                                   @news.Description
                               </div>
                        <div class="show-more">
                            <a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        }
    }
</div>

这些是显示我的问题的图像：

请帮忙。

Answer 1

你可以使用这个 CSS，

.content-side{
font-size:0px;
}
.content-side .col-md-6{
float:none!important;
display:inline-block;
vertical-align:top;
font-size:14px;
}
.content-side>*{
font-size:14px;
}

Answer 2

您正在使用引导列来调整网格中的项目，并且每个帖子中的内容在垂直方向上都是灵活的，这导致项目的高度不一致，所以问题是引导列使用浮动将项目放在每个帖子的前面当元素的高度不一致时， other 和 float 会干扰第二行的布局。 对此的解决方案是对我喜欢和使用的 cols 的一点破解，但您也可以尝试其他解决方案，根据您的情况使用这个

`.content-side div[class^="col-"]{
float:none !important;
display: inline-block;
vertical-align:top;
margin-right: -4px;
}`

希望能解决问题