使引导容器大小变大会使页面无响应
Posted
技术标签:
【中文标题】使引导容器大小变大会使页面无响应【英文标题】：making the bootstrap container size bigger makes the page unresponsive 【发布时间】：2021-11-10 21:23:20 【问题描述】：我需要使引导程序的容器大小更大。我放这个样式表是为了让容器变大：
@media (min-width: 992px)
.container.max-width-940
max-width: 1390px !important;
@media (min-width: 1200px)
.container.max-width-940
max-width: 1390px !important;
.container.max-width-940
min-width: 1390px !important;
并在我页面上的 div 标签中使用它：
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%" class="container max-width-940 body-content" />
每当我这样做时，页面都会变得无响应。每当我调整页面大小时，控件和文本就会开始超出屏幕。以下是我的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
.navbar-brand
display: flex;
white-space: normal;
@media (min-width: 992px)
.container.max-width-940
max-width: 1390px !important;
@media (min-width: 1200px)
.container.max-width-940
max-width: 1390px !important;
.container.max-width-940
min-width: 1390px !important;
</style>
</head>
<body style="background-color:cadetblue">
<form id="form1" runat="server">
<asp:ScriptManager ID="s" runat="server"></asp:ScriptManager>
<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:90%; ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex; white-space: normal;">
<img src="~/Images/Logo_Circle.png" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e4b16d">City of Testing</span><br />This is the company name</span>
</span>
</div>
</nav>
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%" class="container max-width-940 body-content">
<div style="margin-top: 0px">
<asp:UpdatePanel ID="updatePanel2" runat="server">
<ContentTemplate>
<div style="align-items:center; justify-content:left;display:flex;font-size:24px"><b>Recording test testing</b></div>
<div> </div>
<div>
<span style="font-size:18px"> This is a test1. This is a test2.This is a test3.This is a test4.This is a test5.This is a test6.This is a test7.This is a test8.This is a test9.This is a test10.This is a test11This is a test12This is a test13This is a test14This is a test15This is a test16This is a test17This is a test18This is a test19This is a test20This is a test21This is a test22This is a test23This is a test24.</span>
</div>
<div> </div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
以下是屏幕截图：
不知何故，当我调整屏幕大小时，我的导航栏开始与屏幕内容重叠。如何在调整大小时修复这种重叠和超出屏幕的文本。
【问题讨论】：
看起来你在默认类上设置的min-width 可能是 max-width ？但是，如果您真的想要响应式设计，为什么不使用 bootstrap 为这些场景提供的内置网格和实用程序类呢？
【参考方案1】：
使引导容器更大（宽度）的最佳方法如下：
@media (min-width: 1440px)
.container
max-width: 1240px !important;
@media (min-width: 1640px)
.container
max-width: 1440px !important;
@media (min-width: 1840px)
.container
max-width: 1640px !important;
@media (min-width: 2040px)
.container
max-width: 1840px !important;
$container-max-widths: (
sm: 700px,
md: 800px,
lg: 960px,
xl: 1140px
) !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1400px,
xxl: 2000px
);
您使用的最小宽度不起作用，因为引导程序正在使用最大宽度。
【讨论】：
这行得通！除了我的导航栏仍然与页面内容重叠。对此的任何帮助将不胜感激。 在有重叠的部分/ div 上放置填充。如果重叠在顶部： padding: 40px 0;侧面：内边距：0 40px; 填充不起作用。我将单独发布这个问题..以上是关于使引导容器大小变大会使页面无响应的主要内容，如果未能解决你的问题，请参考以下文章