Bootstrap 5 - 在移动设备上更改表格宽度

Question

我希望表单在桌面上以 100% 的宽度显示，在移动设备上以 75% 的宽度显示。

有没有办法使用 w-100 和 w-75 来做到这一点，还是必须通过媒体查询来完成？另外，我使用的媒体查询没有效果，所以我做错了什么，但我不知道是什么。

  <style>
/* Portrait phones and smaller */

@media (min-width: 768px) {
  .formwidth: {
    {
      width: 75%;
    }
  }
  </style>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-center">
  <div class="col-md-6 mx-auto d-block d-flex justify-content-center"> <img alt="Student Dashboard Login" src="https://efit.health/images/running-guy.svg" width="90%" class="mb-4" role="presentation" /></div>
  <div class="col-md-6 col-sm-12 d-flex justify-content-center">
    <form METHOD="post" ACTION="success.php" aria-label="Sign in to Student Dashboard" id="signin" class="formwidth">
      <div role="group" aria-labelledby="contact-label">
        <div class="form-group text-left mb-3 form-floating">
          <input type="text" id="username" class="form-control" placeholder="Enter Username" name="username" aria-required="true" aria-label="Enter Username" required autofocus>
          <label for="username" class="form-label">Username</label>
        </div>
      </div>
      <div class="d-grid gap-2 mx-auto">
        <button type="submit" class="btn btn-outline-primary btn-lg btn-responsive" value="Sign In">Sign In</button>
      </div>
    </form>
  </div>
</div>

Answer 1

这可以通过表单上的响应式 .col-* 类和 .w-100 来完成。

记住 BS 使用“移动优先”的意识形态。您希望从最小屏幕上的 .col-8 75% 开始，然后 .col-md-6 中等和更大屏幕上的一半行。你也应该 .justify-content-center 在 parent .row:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center">
  <div class="col-md-6 mx-auto d-block d-flex"> <img alt="Student Dashboard Login" src="https://efit.health/images/running-guy.svg" width="90%" class="mb-4" role="presentation" /></div>
  <div class="col-8 col-md-6 d-flex ">
    <form METHOD="post" ACTION="success.php" aria-label="Sign in to Student Dashboard" id="signin" class="w-100">
      <div role="group" aria-labelledby="contact-label">
        <div class="form-group text-left mb-3 form-floating">
          <input type="text" id="username" class="form-control" placeholder="Enter Username" name="username" aria-required="true" aria-label="Enter Username" required autofocus>
          <label for="username" class="form-label">Username</label>
        </div>
      </div>
      <div class="d-grid gap-2 mx-auto">
        <button type="submit" class="btn btn-outline-primary btn-lg btn-responsive" value="Sign In">Sign In</button>
      </div>
    </form>
  </div>
</div>

Bootstrap 5 - 在移动设备上更改表格宽度

Bootstrap 5 - Change FORM width on mobile

width

media-queries

responsive-design

bootstrap-5