代码之家 › 专栏 › 技术社区 › Ryan

从显示中删除图像后重新定位窗体

bootstrap-4 sass css

Ryan · 技术社区 · 6 年前

在下面的代码中,我有一个我不想在小屏幕上显示的图像(在底部)。缩小视口时,输入字段是左对齐的。当屏幕是XS时,我希望它们位于视口的中心。我尝试过改变bootstrap4flex的设置,但是还没有找到解决方案。在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 %}

1 回复 | 直到 6 年前

Serg Chernata 6 年前

您可以使用媒体查询在以下位置提供其他样式: 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 %}