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

您正在使用bootstrap cols调整网格中的项目，并且每个帖子中的内容都是垂直灵活的，结果项目的高度不一致，因此问题是bootstrap cols使用float将项目放在每个帖子前面当元素具有不一致的高度时，other和float会从第二行干扰布局。解决这个问题对我喜欢和使用的cols有点破解，但你也可以尝试其他解决方案，为你的情况使用这个

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

希望它能解决问题

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

2 个答案: