Bootstrap 5.3中col-sm-12移动端未正常适配的问题求助

问题原因 #

Bootstrap 5的网格断点规则里，col-sm-12仅在屏幕宽度≥576px时生效，而你所说的"移动端"通常指宽度小于576px的设备（对应Bootstrap的xs断点），此时没有指定对应列类，元素会采用默认布局行为，导致宽度无法铺满屏幕。

解决方法 #

把col-sm-12替换为col-12——col-*是针对xs断点（<576px）的通用列类，能让元素在所有小屏幕设备下都占满12列（即100%宽度）。修改后的列代码如下：

<div class="col-md-6 col-12 mx-auto">

完整修改后的代码 #

<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-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>

额外排查点 #

如果修改后仍有问题，检查是否存在自定义CSS给.card或列元素设置了固定宽度（比如width: 400px），这类样式会覆盖Bootstrap的网格规则，需要删除或调整。

内容的提问来源于stack exchange，提问作者TheDifference