html - 如何缩放 Bootstrap 4 表单以适应移动 View 中的宽度？

Question

我有一个使用 Bootstrap 4 制作的表单，我希望对其进行缩放以适应移动用户的视口(viewport)。

目前，移动用户看到的是这样的:

如您所见，表单输入不适合屏幕宽度。我希望他们占据屏幕的宽度。

我在头部设置了视口(viewport)，如下所示:

<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>