如何解决Bootstrap 4网格布局，一排三列，一列填满整个空间后再排另一列
我正在尝试为我的razor-page bootstrap实现实现以下格式：
行
.col-8
.col-3 [嵌套]
.col-9 [嵌套]
.col-4
行
.col
| ---- | ------ | ---- |
| ------------ |
这是我目前拥有的：
绿色背景表示第1行，橙色表示第2行。
我猜由于以下代码，第一行显示为：
[
[ { lat:44.648490,lng:44.774844 },{ lat:46.648490,lng:46.774844 } ],[ { lat:44.648490,...
]
当我将起始行更改为此：
<div class="row" style="height:100vh;background:green">
我得到了这种不需要的布局：
我正在尝试将第三列（较大的内容）限制为与左侧列相同的高度。 vh-100可以解决此问题，但它在第1行和第2行之间造成了巨大的差距。
我只想确保遵循最佳实践，而不是将列硬编码为特定的最大高度约束。
任何建议将不胜感激。
这是我正在使用的整个cshtml：
<div class="row" style="background:green">
更新：
我最终将右列表div修改为以下内容：
<div class="row" style="height:100vh;background:green">
<div class="col-8 h-50">
<div class="row h-100">
<div class="card col-3 border-right-0 rounded-0">
<img src=@string.Format("URI/{0}?height=250",Model.UserDisc.EmployeeId0) style="object-fit:cover;width:100%">
</div>
<div class="card col-9 rounded-0">
<ul class="list-group list-group-flush">
<li class="list-group-item">@assocname</li>
<li class="list-group-item">@Model.UserDisc.Title0</li>
<li class="list-group-item">@Model.UserDisc.TelephoneNumber0</li>
<li class="list-group-item">@Model.UserDisc.EmployeeId0</li>
<li class="list-group-item">@Model.UserDisc.Sid0</li>
<li class="list-group-item">@Model.UserDisc.PhysicalDeliveryOfficeNam0</li>
<li class="list-group-item">@Model.UserDisc.HomeDirectory0</li>
<li class="list-group-item">
@if (!(Model.UserDisc.UserAccountControl0 == 512))
{
<a href="#" class="badge badge-danger">AD ACCOUNT: LOCKED</a>
}
else
{
<a href="#" class="badge badge-info">AD ACCOUNT: GOOD</a>
}
</li>
<li class="list-group-item">
Manager: @mg
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
View Direct Reports
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-4 h-50" style="overflow-y:auto">
@{
String isSearching = "visible";
if (Model.CurrentFilter?.Length > 1)
isSearching = "disabled";
else
isSearching = "visible";
}
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<div>
Total Groups: @Model.UserGroupMembership?.Count
</div>
<table id="myTable" class="table table-bordered table-striped mb-0">
<thead>
<tr>
<th>Groups</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.UserGroupMembership)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="row container-fluid w-100 h-100" style="background:orange">
<table class="table table-responsive" style="overflow:auto">
<thead class="thead-dark">
<tr>
<th scope="col">
@Html.DisplayNameFor(model => model.PCDetails[0].ResourceName)
</th>
<th>Status</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].CurrentLogonUser)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].PrimaryUser)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].LastLogonUser)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].Manufacturer)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].Model)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].SerialNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].Architecture)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].OSCaption)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].OSInstallDate)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].LastHardwareScan)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].LastBootupTime)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].CNIsOnline)
</th>
<th>
@Html.DisplayNameFor(model => model.PCDetails[0].CNLastOnlineTime)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.PCDetails)
{
var style = "offline";
if (item.CNIsOnline == true)
{
style = "online";
}
<tr>
<td>
@{
var n = item.ResourceName;
}
<a href="../Clients/Details?id=@n">@n</a>
</td>
<td>
@if (style == "online")
{
<a href="#" class="badge badge-success">ONLINE</a>
}
else
{
<a href="#" class="badge badge-secondary">OFFLINE</a>
}
</td>
<td>
@Html.DisplayFor(modelItem => item.CurrentLogonUser)
</td>
<td>
@Html.DisplayFor(modelItem => item.PrimaryUser)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastLogonUser)
</td>
<td>
@Html.DisplayFor(modelItem => item.Manufacturer)
</td>
<td>
@Html.DisplayFor(modelItem => item.Model)
</td>
<td>
@Html.DisplayFor(modelItem => item.SerialNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.Architecture)
</td>
<td>
@Html.DisplayFor(modelItem => item.OSCaption)
</td>
<td>
@Html.DisplayFor(modelItem => item.OSInstallDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastHardwareScan)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastBootupTime)
</td>
<td>
@Html.DisplayFor(modelItem => item.CNIsOnline)
</td>
<td>
@Html.DisplayFor(modelItem => item.CNLastOnlineTime)
</td>
</tr>
}
</tbody>
</table>
</div>
我没有意识到我可以为该属性使用除 100vh 之外的任何其他功能。
解决方法
在您的表HTML中，请注意引号：
<table id="myTable" class="table table-bordered table-striped mb-0" ">
一个简单的复制/粘贴到jsfiddle中可以指出这个问题。
（问题）https://jsfiddle.net/tive/gya9zu2k/1/（ln：103）
我的建议是不要将列结构与内容混合在一起。
- 删除第一行的
100vh。 -
h-50或h-100类应该放在您的内容中，位于列之内 - 使用包装纸来调整组的动态高度
- 与您的卡片布局类似，卡片放置在列中。现在，该列不再是卡片，而是结构和内容的混合。
<div class="your-wrapper" style="overflow-y:auto;max-height:100vh;">
<table id="myTable" class="table table-bordered table-striped mb-0"></table>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。