首頁猿問如何阻止 Bootstrap...

如何阻止 Bootstrap Nuget Package 影響 HTML 框高度

Html5

縹緲止盈 2023-10-24 15:15:28

我正在為我的 ASP.NET MVC 課程開發(fā)一個最終項目。總結(jié)一下該應(yīng)用程序，它是一個酒店管理系統(tǒng)，允許用戶預(yù)訂酒店房間。我正在使用 bootstrap Nuget 包來提供 CSS 樣式，但在排除故障后，我發(fā)現(xiàn)它導(dǎo)致了盒子模型大小調(diào)整問題。我正在管理面板上工作，系統(tǒng)管理員可以登錄該面板來執(zhí)行管理任務(wù)；例如評論預(yù)訂、查看用戶數(shù)據(jù)等。當(dāng)我查看頁面時，寬度適合屏幕，但高度很短，似乎渲染為1366x215.5，而我希望它填滿顯示器。值得注意的是，我使用的是實體框架控制器（帶有預(yù)先生成的視圖），因此我使用 IFrame 從管理控制器顯示 EF 視圖，而不是從管理員頁面重定向到 EF 控制器。當(dāng)我從父視圖中刪除 bootstrap.min.css 的鏈接，將 bootstrap 鏈接保留在 IFrame 顯示的視圖中時，一切正常。所以我想這與父級使用 bootstrap.min.css 文件時的問題有關(guān)。我嘗試反轉(zhuǎn)它，從 IFrame 視圖中刪除鏈接，并將其保留在父視圖中，但它仍然會發(fā)生。似乎 100% 是由父視圖中的引導(dǎo)鏈接引起的，但我在我的應(yīng)用程序中使用它，并且在其他任何地方都沒有問題。這是正在展示的照片：我對管理員頁面使用主布局：<!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>

查看完整描述

1 回答

慕容3067478

TA貢獻1773條經(jīng)驗獲得超3個贊

有幾種方法可以解決此問題。

首先，始終建議在 BootStrap 中將 iframe 包裝在嵌入響應(yīng)標(biāo)簽中并設(shè)置寬高比。

盡管更適合您的目的和設(shè)置方式，但更建議您通過 CSS 樣式自己設(shè)置 iframe 的高度，例如 80vh （或 screen 垂直高度的 80% ）。

不幸的是，在使用框架時您希望考慮一些想法和設(shè)計注意事項。iframe 的主要問題是，您無法準(zhǔn)確地了解框架中的內(nèi)容如何在每個設(shè)備上呈現(xiàn)，以考慮用戶將擁有的屏幕空間、字體大小、間距等或 iframe 最終需要多少內(nèi)容因此最終使用 iframe 進行顯示將會產(chǎn)生額外的間距來解釋這些差異，并且最終可能會或可能不會弄亂您的設(shè)計主題?；蛘邔τ趦?nèi)容來說太小，因此可能需要滾動條，因此可能會給用戶帶來可用性問題。

反對回復(fù) 2023-10-24