时间戳

首页 > 解决方案 > 如何阻止 Bootstrap Nuget 包影响 HTML 框高度

html - 如何阻止 Bootstrap Nuget 包影响 HTML 框高度

问题描述

我正在为我的 ASP.NET MVC 类做一个最终项目。总结应用程序，它是一个允许用户预订酒店房间的酒店管理系统。

我正在使用 bootstrap Nuget 包来提供 CSS 样式，但在进行故障排除后，我发现它导致了盒子模型大小的问题。

我正在管理面板上工作，系统管理员可以在其中登录以执行管理任务；比如审阅预约，查看用户数据等。当我查看页面时，宽度适合屏幕，但高度很短，似乎渲染到1366x215.5，而我期望它会填满显示。值得注意的是，我使用的是实体框架控制器（带有预生成的视图），因此我没有从管理员页面重定向到 EF 控制器，而是使用 IFrame 来显示来自管理控制器的 EF 视图。

当我从父视图中删除 bootstrap.min.css 的链接时，将引导链接留在 IFrame 显示的视图中，一切正常。所以我想它与父母使用 bootstrap.min.css 文件时的问题有关。我已经尝试反转它，从 IFrame 视图中删除链接，并将其保留在父视图中，但它仍然会发生。

似乎 100% 是由父视图中的引导链接引起的，但我在整个应用程序中都使用它，并且在其他任何地方都没有问题。

这是正在显示的照片：

这是正在显示的照片

我对管理员页面使用主布局：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <title>ReserveIt | @ViewBag.Title</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand">ReserveIt</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    @Html.ActionLink("Users", "Main", "Admin", null, new { @class = "nav-link" })
                </li>
                @if (Session["email"] != null)
                {
                    <li class="nav-item">
                        @Html.ActionLink("My Account", "Details", "Accounts", new { id = Session["userID"] }, new { @class = "nav-link" })
                    </li>
                }
                <li class="nav-item">
                    <a class="nav-link" href="reservations.php">Reservations</a>
                </li>
            </ul>
            <div class="form-inline my-2 my-lg-0">
                @if (Session["email"] == null)
                {
                    @Html.ActionLink("Login", "Index", "Login", null, new { @class = "btn btn-outline-success my-2 my-sm-0" });
                }
                else
                {
                    @Html.ActionLink("Logout", "Logout", "Login", null, new { @class = "btn btn-outline-success my-2 my-sm-0" });
                }
            </div>
        </div>
    </nav>

    @RenderBody()
</body>
</html>

我目前在父视图中只有布局参考和 IFrame 标签

@{
    ViewBag.Title = "Main";
    Layout = "~/Views/Shared/_AdminMasterLayout.cshtml";
}

<iframe src="@Url.Action("Index", "Accounts")"></iframe>

而EF Controller视图（IFrame中显示的视图）如下

@model IEnumerable<ReserveIt.Models.User>

@{
    ViewBag.Title = "Index";
}

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Firstname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Middlename)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Lastname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Phone)
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Firstname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Middlename)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Lastname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Phone)
            </td>
            <td style="white-space: nowrap">
                @Html.ActionLink("Edit", "Edit", new { id = item.UserID }) |
                @Html.ActionLink("Details", "Details", new { id = item.UserID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.UserID })
            </td>
        </tr>
    }
</table>

我对 ASP.NET 比较陌生，所以我可能会遗漏一些东西并且很高兴学习。

标签： htmlcssasp.netasp.net-mvctwitter-bootstrap

解决方案

有几种方法可以解决此问题。

首先，始终建议在 BootStrap 中将 iframe 包装在 embed-responsive 标签中并设置纵横比。例如 ：

请参阅：https ://getbootstrap.com/docs/4.4/utilities/embed/

虽然更多的是为了您的目的和您设置事物的方式，但可能更建议您通过 CSS 样式设置 iframe 的高度，例如 80vh（或屏幕垂直高度的 80%）。

不幸的是，在使用您希望考虑的框架时，有一些想法和设计注意事项。iframe 的主要问题是，您无法准确说明框架中的内容将如何在每个设备上呈现，以说明用户将拥有的屏幕空间、字体大小、间距等，或者 iframe 最终需要多少内容最终使用 iframe 进行显示最终会产生额外的间距来解释这些差异，并且可能会或可能不会最终弄乱您的设计主题。或者对于内容来说太小，因此可能需要滚动条，因此可能会给用户带来可用性问题。

推荐阅读