我有一个问题与Bootstrap移动的设计。即使我输入col-sm-12，它也不会在移动的设计中精确调整大小。这个问题怎么解决？我用的是bootstrap 5.3。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0-alpha3/css/bootstrap.min.css" integrity="sha512-iGjGmwIm1UHNaSuwiNFfB3+HpzT/YLJMiYPKzlQEVpT6FWi5rfpbyrBuTPseScOCWBkRtsrRIbrTzJpQ02IaLA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12 mx-auto">
      <div class="card mt-5">
        <div class="card-header">
          <div class="card-text">
            <span>Giriş</span>
          </div>
        </div>
        
        <div class="card-body">
          <form method="POST" action="">
            <div class="mb-3">
              <label class="form-label" for="kullaniciAdi">Kullanıcı Adı:</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fa-solid fa-user"></i></span>
                <input class="form-control" type="text" name="kullaniciAdi" placeholder="Lütfen kullanıcı adınızı giriniz." required>
              </div>
            </div>
            
            <div class="mb-3">
              <label class="form-label" for="sifre">Şifre:</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fa-solid fa-lock"></i></span>
                <input class="form-control" type="password" name="sifre" placeholder="Lütfen şifrenizi giriniz." required>
              </div>
            </div>
            
            <button class="btn btn-outline-success" type="submit">Giriş Yap</button>
            <a class="btn btn-outline-primary" role="button" type="button" href="Kayit">Kayıt Ol</a>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>