css - Bootstrap 4网格布局一行三列，然后用一列填满整个空间后的另一行

问题描述

我正在尝试为我的剃刀页面引导程序实现实现以下格式：

排

.col-8

.col-3 [嵌套]

.col-9 [嵌套]

.col-4

排

.col

|---|-----|----|

| ------------ |

这是我目前拥有的：

绿色背景表示第 1 行，橙色为第 2 行。

由于以下代码，我猜第一行显示如下：

<div class="row" style="height:100vh;background:green">

当我将起始行更改为此：

<div class="row" style="background:green">

我得到了这个不受欢迎的布局：

我正在尝试将第三列（大内容）限制在与左侧列相同的高度。vh-100 解决了它，但它在第 1 行和第 2 行之间造成了巨大的差距。

我只想确保我遵循最佳实践，而不是将列硬编码为特定的最大高度约束。

任何建议将不胜感激。

这是我正在使用的整个 cshtml：

<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>

更新：

我最终将右列表 div 修改为以下内容：

<div class="wub" style="overflow-y:auto;max-height:50vh;overflow-x:hidden">

我没有意识到我可以为该属性使用除100vh 之外的任何东西。

标签： cssbootstrap-4razor-pages

在您的表格 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>

演示

css - Bootstrap 4网格布局一行三列，然后用一列填满整个空间后的另一行

问题描述

解决方案

推荐阅读