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个产品

如图所示

enter image description here

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

enter image description here

但是，如果我点击第一行或第二行的第三个产品，布局仍然处于固定状态......

我有点疑惑为什么会这样？有人可以对此有所了解吗？

Answer 1

首先关闭<div class="col-lg-12">是多余的，可以删除。其次，您所有的产品都显示在您的“预告”中？因为这会使你的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手风琴的奇怪行为

1 个答案: