【发布时间】：2021-11-10 02:37:51
【问题描述】：
我的网页上有以下代码：
<!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" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<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>
<link rel="stylesheet" href="Styles/new.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="s" runat="server"></asp:ScriptManager>
<div>
</div>
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:1600px;" class="container max-width-940 body-content" >
<div style="margin-top: 70px">
<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>
</div>
</div>
</form>
</body>
</html>用户要求我使其适合移动设备，因此每当我运行上述代码时，它都不会响应移动应用程序。当我缩小页面时。而不是“这是测试”进入下一行。它超出了小屏幕的长度。它作为网页可以正常工作，但是一旦我将屏幕缩小，文本就会超出屏幕的大小。下面是截图：
我在我的应用程序中使用引导程序，并且我也在我的母版页上使用元标记，但页面似乎对大小变化没有响应。
任何帮助将不胜感激。
【问题讨论】：
-
为什么在 2021 年使用 WebForms？自 2008 年以来，它实际上已经过时了。
-
width:1600px 为包含“container max-width-940 body-content”的容器设置使其宽度：100% 它将起作用
标签： html css bootstrap-4 flexbox