当我进入移动设备视图时，我的登录页面会自动向左对齐吗？我在烧瓶中使用bootstrap4

Question

这是我的代码，请仔细阅读并先谢谢当我进入手机视图时，我的登录页面会自动向左对齐？我正在使用带有烧瓶的bootstrap4

<form class="text-center align-items-center container mx-auto" action="/" method="post" style="width: 40rem;">

  <div class="card-header">
    <h1>Application Login</h1>
  </div>
  <div class="card-body justify-content-center align-items-center container">
    <!-- User Name -->
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="username">
          <img src="{{url_for('static', filename='app_default_icons/user.svg')}}" alt="UserName" width="32" height="24" title="UserName">
        </span>
      </div>
      <input type="text" class="form-control" placeholder="Enter Username Here" aria-label="Username" aria-describedby="username" name="entered-username" maxlength="20">
    </div>
    <!-- User Name -->
    <!-- Password -->
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="password">
          <img src="{{url_for('static', filename='app_default_icons/lock.svg')}}" alt="UserName" width="32" height="24" title="Password">
        </span>
      </div>
      <input type="password" class="form-control" placeholder="Enter Your Password" aria-label="Password" aria-describedby="password" name="entered-password" maxlength="20">
    </div>
    <!-- Password -->
    <!-- forget password -->
    <a href="/forget-identity" class="card-link" title="Reset Password">Forget My Password</a>
    <!-- foget password -->
  </div>
  <div class="card-footer align-items-center container">
    <button type="submit" class="btn btn-primary btn-lg btn-block" title="LogIn To Application">LogIn</button>
  </div>
  </form>

Answer 1

好吧，我只需要将宽度设置为自动形式即可