css - 移动视图上的引导断点问题
问题描述
我正在使用 bootstrap5 进行响应式登录。在 web 视图上工作正常,但是当我尝试移动视图时,它看起来很奇怪,md 和 sm 断点不会触发。然后,开始写这个问题,我粘贴下面的代码,令我惊讶的是它在移动视图中必须如此工作......所以无法理解为什么。
这是一个展示这件事的视频......代码完全相同,实际上是复制粘贴。知道发生了什么吗?
我使用 XAMPP 作为服务器。
<!DOCTYPE html>
<html lang="es">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Login</title>
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<style>
body {
background-image: url("https://media.istockphoto.com/vectors/geometric-colorful-gradient-background-template-vector-id1172689378?k=20&m=1172689378&s=612x612&w=0&h=e2p0ZMiGiKJE2rtkNUyDoqk_TSSTD1gFHpOi8BzKdnc=");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
</style>
</head>
<body>
<div class="container vh-100">
<form id="signup" class='row h-100'>
<div class="col d-none d-md-block"></div>
<div class="col m-3 my-auto mx-sm-0 bg-light">
<div class="row mb-3">
<span class="col">
<img src="https://www.pngkit.com/png/detail/140-1403354_bsbr1t9a0resdcqo-logo-demo.png" class="img-fluid" alt="...">
</span>
</div>
<div class="row input-group mb-3 mx-0">
<span class="col-auto input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
</span>
<input type="text" class="col form-control" name="user" placeholder="User" required>
</div>
<div class="row input-group mb-3 mx-0">
<span class="col-auto input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-key-fill" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
</svg>
</span>
<input type="password" class="col form-control" name="pass" placeholder="Password" required>
</div>
<div class="row justify-content-center mb-2">
<div class="col">
<button type="submit" class="btn w-100 btn-success">Log In</button>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(function() {
$('#signup').submit(function(e) {
e.preventDefault();
//some code bla bla bla
});
});
</script>
</body>
</html>
解决方案
最后我得到了它的工作......只需要添加并且手机<meta content='initial-scale=1.0, width=device-width' name='viewport'>
上<head>
的响应开始通过所有断点。
这篇文章的学分。
推荐阅读
- linux - 为什么我的 httpd.conf 设置路由到 https?
- java - 如何在银行程序中打印余额(Java)
- php - 在 WordPress 中以编程方式一次删除一个文件
- kotlin - Kotlin null propagation syntax not working
- python - 如何使用 Python 在远程服务器上启动异步服务器?
- ios - iOS VPN 自动断开连接,Algo VPN
- tcl - 如何创建一个列表,从其他列表的特定索引中取出值然后进行排序?
- java - 在启动时使用谷歌计费检查购买
- java - Logback 和 Graylog 无法在 Mac 上使用 syslog 进行通信
- python - Selenium WebDriver 异常:消息:未知错误:无法创建 Chrome 进程