css - 从显示中移除图像后重新定位表单

Question

在下面的代码中，我不想在小屏幕(底部)上显示一张图片。当视口(viewport)缩小时，输入字段是左对齐的。当屏幕为 XS 时，我希望它们位于视口(viewport)的中心。我试过更改 Bootstrap 4 flex 设置，但尚未找到解决方案。有没有办法在 Bootstrap 或 SASS 中执行此操作？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% block body %}
<div class="container d-flex">
  <div class="row justify-content-center">
    <div class="col-md-8 col-sm-8 col-xs-12">
      <form action="{{ url_for('register') }}" method="post" class="my-5" id="registrationForm">
        <div class="form-group">
          <label class="firstName" for="firstName">First Name</label>
          <input type="text" class="form-control" id="firstName" name="firstname" placeholder="First Name">
        </div>
        <div class="form-group">
          <label class="lastName" for="lastName">Last Name</label>
          <input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last Name">
        </div>
        <div class="form-group">
          <label class="eMail" for="eMail">Email Address</label>
          <input type="email" class="form-control" id="eMail" name="email" placeholder="Email">
        </div>
        <div class="form-group">
          <label class="userName" for="userName">Preferred User Name</label>
          <input type="text" class="form-control" id="userName" name="username" placeholder="User Name">
        </div>
        <div class="form-group">
          <label class="passWord" for="passWord">Password</label>
          <input type="password" class="form-control" id="passWord" name="password" placeholder="Password">
        </div>
        <div class="form-group">
          <label class="passWord_2" for="password_2">Confirm Password</label>
          <input type="password" class="form-control" id="password_2" name="password2" placeholder="Confirm Password">
        </div>
        <div class="form-group text-center">
          <button type="submit" class="btn btn-primary custom-btn">Register!</button>
        </div>
      </form>
    </div>
    <div class="col-md-4 col-sm-4 flex-column my-5 py-3 align-self-center">
      <img class="img-fluid img-thumbnail d-none d-sm-block" src="/static/savoy.jpeg" alt="aubrey beardsley drawing" />
    </div>
  </div>
</div>
<!-- End form container -->
{% endblock %}

Answer 1

您可以使用媒体查询在 specific breakpoints 提供额外的样式.

@media (max-width: 575px) {
  .row.center-on-xs{ margin: 0 auto; }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% block body %}
<div class="container d-flex">
  <div class="row center-on-xs justify-content-center">
    <div class="col-md-8 col-sm-8 col-xs-12">
      <form action="{{ url_for('register') }}" method="post" class="my-5" id="registrationForm">
        <div class="form-group">
          <label class="firstName" for="firstName">First Name</label>
          <input type="text" class="form-control" id="firstName" name="firstname" placeholder="First Name">
        </div>
        <div class="form-group">
          <label class="lastName" for="lastName">Last Name</label>
          <input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last Name">
        </div>
        <div class="form-group">
          <label class="eMail" for="eMail">Email Address</label>
          <input type="email" class="form-control" id="eMail" name="email" placeholder="Email">
        </div>
        <div class="form-group">
          <label class="userName" for="userName">Preferred User Name</label>
          <input type="text" class="form-control" id="userName" name="username" placeholder="User Name">
        </div>
        <div class="form-group">
          <label class="passWord" for="passWord">Password</label>
          <input type="password" class="form-control" id="passWord" name="password" placeholder="Password">
        </div>
        <div class="form-group">
          <label class="passWord_2" for="password_2">Confirm Password</label>
          <input type="password" class="form-control" id="password_2" name="password2" placeholder="Confirm Password">
        </div>
        <div class="form-group text-center">
          <button type="submit" class="btn btn-primary custom-btn">Register!</button>
        </div>
      </form>
    </div>
    <div class="col-md-4 col-sm-4 flex-column my-5 py-3 align-self-center">
      <img class="img-fluid img-thumbnail d-none d-sm-block" src="/static/savoy.jpeg" alt="aubrey beardsley drawing" />
    </div>
  </div>
</div>
<!-- End form container -->
{% endblock %}