Как масштабировать форму Bootstrap 4, чтобы она соответствовала ширине в мобильном представлении?

Question

У меня есть форма, созданная с помощью Bootstrap 4, которую я хочу масштабировать, чтобы она соответствовала области просмотра мобильного пользователя.

В настоящее время мобильные пользователи видят следующее:

Как видите, входные данные формы не соответствуют ширинеэкрана.Я хочу, чтобы они занимали ширину экрана.

У меня в голове установлен видовой экран примерно так:

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Я также пытался сделать:

@media screen and (max-width: 360px) {
  form-row col-xs-6 {
    width: 100% !important; 
  }
}

, но чтобыбезрезультатно.

Вся помощь приветствуется!

Answer 1

использовать входы с container

<div class="container">
    <div class="row">
    <div class="form-group col-md-6">
      <label for="usr">Name:</label>
      <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group col-md-6">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
    </div>
    </div>