我正在為我的 ASP.NET MVC 課程開發一個最終項目。總結一下該應用程序，它是一個酒店管理系統，允許用戶預訂酒店房間。我正在使用 bootstrap Nuget 包來提供 CSS 樣式，但在排除故障后，我發現它導致了盒子模型大小調整問題。我正在管理面板上工作，系統管理員可以登錄該面板來執行管理任務；例如評論預訂、查看用戶數據等。當我查看頁面時，寬度適合屏幕，但高度很短，似乎渲染為1366x215.5，而我希望它填滿顯示器。值得注意的是，我使用的是實體框架控制器（帶有預先生成的視圖），因此我使用 IFrame 從管理控制器顯示 EF 視圖，而不是從管理員頁面重定向到 EF 控制器。當我從父視圖中刪除 bootstrap.min.css 的鏈接，將 bootstrap 鏈接保留在 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>
1 回答
慕容3067478
TA貢獻1773條經驗 獲得超3個贊
有幾種方法可以解決此問題。
首先，始終建議在 BootStrap 中將 iframe 包裝在嵌入響應標簽中并設置寬高比。
盡管更適合您的目的和設置方式，但更建議您通過 CSS 樣式自己設置 iframe 的高度，例如 80vh （或 screen 垂直高度的 80% ）。
不幸的是，在使用框架時您希望考慮一些想法和設計注意事項。iframe 的主要問題是，您無法準確地了解框架中的內容如何在每個設備上呈現，以考慮用戶將擁有的屏幕空間、字體大小、間距等或 iframe 最終需要多少內容因此最終使用 iframe 進行顯示將會產生額外的間距來解釋這些差異，并且最終可能會或可能不會弄亂您的設計主題。或者對于內容來說太小，因此可能需要滾動條，因此可能會給用戶帶來可用性問題。
- 1 回答
- 0 關注
- 114 瀏覽
添加回答
舉報
0/150
提交
取消