Question

我正在尝试使用引导网格使具有行和手风琴的容器的布局具有相等的宽度列。问题是将手风琴中的数据与最顶行对齐。

我对bootstrap 4的理解是col类应该按列自动调整大小，所以我认为无论内容如何，所有8列都是相同的宽度。

顶部看起来没问题，但下面的行是浓缩的。这是一个例子：

以下是我的剃刀页面：

<body>
<div class="container">
    <div class="row">
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].Item)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].ItemDescription)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].CorpCustomer)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].UoM)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedOrder)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedForecast)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].Difference)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].Week)
        </div>
    </div>
</div>

<div class="container">
    <div id="accordion">
        @{int counter = 0; }
        @foreach (var dataVM in Model.CollapseReport)
        {
            <div class="card">
                <div class="card-header" id="heading@(counter)">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse@(counter)" aria-expanded="true" aria-controls="collapse@(counter)">

                            <div class="row">
                                <div class="col">
                                    @dataVM.Summary.Item
                                </div>
                                <div class="col">
                                    @dataVM.Summary.ItemDescription
                                </div>
                                <div class="col">
                                    @dataVM.Summary.CorpCustomer
                                </div>
                                <div class="col">
                                    @dataVM.Summary.UoM
                                </div>
                                <div class="col">
                                    @dataVM.Summary.SummedOrder
                                </div>
                                <div class="col">
                                    @dataVM.Summary.SummedForecast
                                </div>
                                <div class="col">
                                    @dataVM.Summary.Difference
                                </div>
                                <div class="col">
                                    @dataVM.Summary.Week
                                </div>
                                </div>
                        </button>
                    </h5>
                </div>

                <div id="collapse@(counter)" class="collapse" aria-labelledby="heading@(counter)" data-parent="#accordion">
                    <div class="card-body">
                        <form method="post">
                            <input type="hidden" name="var1" value="@dataVM.Summary.CorpCustomer" />
                            <input type="hidden" name="var2" value="@dataVM.Summary.Item" />
                            <input type="submit" class="btn btn-default" value="Add to Log" asp-page-handler="AddLog" asp-route-data="@dataVM.Summary.CorpCustomer, @dataVM.Summary.Item)" />
                        </form>
                        <div class="container">
                                    @foreach (var item in dataVM.WeeksOfData)
                                {
                                        <div class="row">
                                            <div class="col">
                                                @item.Item
                                            </div>
                                            <div class="col">
                                                @item.ItemDescription
                                            </div>
                                            <div class="col">
                                                @item.CorpCustomer
                                            </div>
                                            <div class="col">
                                                @item.UoM
                                            </div>
                                            <div class="col">
                                                @item.SummedOrder
                                            </div>
                                            <div class="col">
                                                @item.SummedForecast
                                            </div>
                                            <div class="col">
                                                @item.Difference
                                            </div>
                                            <div class="col">
                                                @item.Week
                                            </div>
                                        </div>
                            }
                                </div>
                    </div>
                </div>
            </div>
            counter++;
        }
    </div>
</div>

Answer 1

原因是您的btn btn-link按钮嵌套在<h5>中。 Bootstrap中的.btn类具有样式display: inline-block;，它不会占用100％的宽度。

即使您在按钮上设置width: 100%;，您的列仍然无法对齐，因为：

.btn的样式为white-space: nowrap;，因此可折叠标题内的文字不会被包裹，而可折叠主体内的文字会包含。
.btn类左右有.75rem填充，这将占用整个行宽。
您的可折叠正文中有一个嵌套容器。容器左右有15px的填充，这也将占据整个行宽。

提示：您可能想要考虑不同的设计/布局。

例如，摆脱标题中嵌套的按钮并使用锚点isntead：

<div class="container">
    @for (int i = 0; i < 5; i++)
    {
        <div class="card">
            <div class="card-header">
                <a href="#" data-toggle="collapse" data-target="#collapse@(i)">
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                </a>
            </div>
            <div id="collapse@(i)" class="collapse">
                <div class="card-body">
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

截图：

Bootstrap 4：使用网格的等宽列

1 个答案: