Css 引导4：使用网格的等宽列
我试图使用引导网格使一个容器的布局（其下有一行和一个手风琴）具有相等宽度的列。问题在于将手风琴中的数据与最上面一行对齐 我对Bootstrap4的理解是，Css 引导4：使用网格的等宽列,css,bootstrap-4,asp.net-core-2.0,razor-pages,Css,Bootstrap 4,Asp.net Core 2.0,Razor Pages,我试图使用引导网格使一个容器的布局（其下有一行和一个手风琴）具有相等宽度的列。问题在于将手风琴中的数据与最上面一行对齐 我对Bootstrap4的理解是，col类应该自动调整每列的大小，因此我认为所有8列的宽度都是相同的，无论内容如何 顶部看起来不错，但下面的行是压缩的。以下是一个例子： 下面是我的剃须刀页面： <body> <div class="container"> <div class="row"> <div class
col<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>
@Html.DisplayNameFor（model=>model.ReportHighLevel[0]。项）
@DisplayNameFor（model=>model.ReportHighLevel[0].ItemDescription）
@Html.DisplayNameFor（model=>model.ReportHighLevel[0].CorpCustomer）
@Html.DisplayNameFor（model=>model.ReportHighLevel[0].UoM）
@Html.DisplayNameFor（model=>model.ReportHighLevel[0].SummedOrder）
@Html.DisplayNameFor（model=>model.ReportHighLevel[0].SummedForecast）
@DisplayNameFor（model=>model.ReportHighLevel[0]。差异）
@Html.DisplayNameFor（model=>model.ReportHighLevel[0].Week）
@{int counter=0；}
@foreach（Model.CollapseReport中的var dataVM）
{
@dataVM.Summary.Item
@dataVM.Summary.ItemDescription
@dataVM.Summary.CorpCustomer
@dataVM.Summary.UoM
@dataVM.Summary.summaredorder
@dataVM.Summary.summatedForecast
@dataVM.Summary.Difference
@dataVM.Summary.Week
@foreach（dataVM.WeeksOfData中的var项）
{
@项目，项目
@item.ItemDescription
@项目.公司客户
@项目.计量单位
@item.SummedOrder
@项目1.SummatedForecast
@项目.差异
@项目。周
}
计数器++；
}
原因是嵌套在
btn-btn-link.btn显示：内联块，不占用100%的宽度
即使您设置宽度：100%
.btn
具有空白的样式：nowrap因此，可折叠标题中的文本不会换行，而可折叠正文中的文本会换行
.btn
类的左右填充为.75rem，这将占用整个行宽度在可折叠体中有一个嵌套容器。这个容器有15px左右的填充，这将占据整个行的宽度
提示：您可能需要考虑不同的设计/布局。
例如，去掉嵌套在标题中的按钮并使用anchor 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>
@对于（int i=0；i<5；i++）
{
项目
项目说明
公司客户
计量单位
求和顺序
总和预测
差别
周
项目
项目说明
公司