Bootstrap 3 种手风琴的奇怪行为

Question

我的页面上展示了我的产品，总共 8 个。

我目前有这个设置

<div class="row">
    <div class="col-lg-12">
        @foreach (var item in Model)
        {
            <div class="col-lg-4" style="margin-bottom:5%; position:relative">

                    <div class="boxTop"></div>
                    <div class="box">
                        <img src="/Content/Images/YogurtImages_280x135/@item.ImageName" width="280" height="135" alt="@item.ImageName" class="productMarginTop">
                        <br />
                        <p style="color: @item.ProductTextColor; font-size: @item.FontSize;" class="productTitle text-center">
                            @item.ProductTitle
                        </p>
                        <br />
                        <hr style="border: 1px solid @item.ProductTextColor" />
                        <h5 style="color: @item.ProductTextColor; font-size:19px" class="text-center" id="nutritionInfo" data-productid="@item.ProductId" data-colorcode="@item.ProductTextColor" data-productname="@item.ProductTitle">
                            NUTRITIONAL INFO <span class="glyphicon glyphicon-chevron-right"></span>
                        </h5>
                        <hr style="border: 1px solid @item.ProductTextColor" />
                        <h5 class="text-center" id="findStore">
                            <a data-toggle="collapse" data-parent="#accordion" href="#@item.ProductId" aria-expanded="true" aria-controls="@item.ProductId" style="color: @item.ProductTextColor;font-size:19px" class="text-center">
                                FIND A STORE <span class="glyphicon glyphicon-chevron-down"></span>
                            </a>
                        </h5>
                        <div id="@item.ProductId" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                            <div class="panel-body">
                                <p>
                                    Content
                                </p>
                                <p>
                                    More Content
                                </p>
                            </div>
                        </div>
                        <hr style="border: 1px solid @item.ProductTextColor" />
                    </div>
                    <div class="boxBtm"></div>

            </div>
        }
       </div>
</div>

所以有 12 列，每个产品占 4 列。每个产品都有其手风琴，因此当单击“查找商店”时，会展开显示该产品库存的详细信息。因为我有八个产品，所以我当前的布局是这样的

第一行：3 个产品第二行：3 个产品第三行：2 个产品

如图所示

现在，当我在第一行或第二行的第一个或第二个产品上单击“查找商店”时，所有内容都会被推到右侧，因此它不会保持此处所示的结构，正如您可以看到第二个产品或者第一行被展开导致布局混乱

但是如果我单击第一行或第二行的第三个产品，布局将保持不变...

我有点疑惑为什么会这样？有人可以透露一些这方面的知识吗？

Answer 1

首先 <div class="col-lg-12"> 是多余的，可以删除。其次，您的 'foreach' 中是否显示了所有产品？因为那会让你的 HTML 结构看起来像这样：

<div class="row">
    <div class="col-lg-4" style="margin-bottom:5%; position:relative">..1</div>
    <div class="col-lg-4" style="margin-bottom:5%; position:relative">..2</div>
    <div class="col-lg-4" style="margin-bottom:5%; position:relative">..3</div>
    ...
    <div class="col-lg-4" style="margin-bottom:5%; position:relative">..12</div>
</div>

但是你要的是这个：

<div class="row">
    <div class="col-lg-4" style="margin-bottom:5%; position:relative">..1</div>
    <div class="col-lg-4" style="margin-bottom:5%; position:relative">..2</div>
    <div class="col-lg-4" style="margin-bottom:5%; position:relative">..3</div>
</div>
<div class="row">
    <div class="col-lg-4" style="margin-bottom:5%; position:relative">..4</div>
    <div class="col-lg-4" style="margin-bottom:5%; position:relative">..5</div>
    <div class="col-lg-4" style="margin-bottom:5%; position:relative">..6</div>
</div>

这应该可以解决您的行未对齐的问题

Bootstrap 3 种手风琴的奇怪行为

Bootstrap 3 strange behavior with accordion

css

jquery

twitter-bootstrap

twitter-bootstrap-3

asp.net-mvc-5.1