Позиционирование формы после удаления изображения с дисплея - PullRequest
0 голосов
/ 29 августа 2018

В следующем коде у меня есть изображение, которое я не хочу показывать на маленьких экранах (внизу). Когда область просмотра уменьшена, поля ввода выровнены по левому краю. Я бы хотел, чтобы они были в центре области просмотра, когда на экране XS. Я пытался изменить настройки 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 %}

1 Ответ

0 голосов
/ 29 августа 2018

Вы можете использовать медиазапросы для предоставления дополнительных стилей на определенных точках останова .

@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 %}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...