移动视图上的引导断点问题答案

【问题标题】：Bootstrap breakpoint issue on mobile view移动视图上的引导断点问题
【发布时间】：2021-11-10 08:13:59
【问题描述】：

我正在使用 bootstrap5 进行响应式登录。在 web 视图上工作正常，但是当我尝试移动视图时，它看起来很奇怪，md 和 sm 断点不会触发。然后，开始写这个问题，我粘贴下面的代码，令我惊讶的是它在移动视图中必须正常工作......所以无法理解为什么。

Here is a video 显示的东西...代码完全相同，实际上是复制粘贴。知道发生了什么吗？

我使用 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>

【问题讨论】：

标签： css bootstrap-5

【解决方案1】：

终于我搞定了...只需要在<head> 中添加<meta content='initial-scale=1.0, width=device-width' name='viewport'>，手机上的响应就开始通过所有断点。

感谢this post。

【讨论】：