html - 可折叠的 div 在折叠时移动其他元素并且它适用于循环中的一个元素

Question

我从数据库中提取数据并使用 foreach 循环遍历每个元素，返回数据但折叠 View 仅适用于第一个元素，当第一个元素折叠时第三个元素移动。这是我在 HTML View 上的代码:

<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;
}