Bootstrap 4：使用网格等宽列

Question

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

我对 bootstrap 4 的理解是 col class 应该自动调整每列的大小，所以我认为无论内容如何，所有 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> 中。 .btn class 来自 Bootstrap 的样式为 display: inline-block;，不占 100% 宽度。

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

.btn 具有 white-space: nowrap; 的样式，因此可折叠标题中的文本不会换行，而可折叠标题 body 中的文本会。
.btn class 左右填充 .75rem，将占用整个行宽。
您的可折叠 body 中有一个嵌套容器。容器左右各有 15px 的内边距，也将占据整个行宽。

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

例如去掉嵌套在标题中的按钮，使用anchor isstead:

<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：使用网格等宽列

Bootstrap 4: Equal width columns using grid

css

bootstrap-4

asp.net-core-2.0

razor-pages