html - 如何使我的表单站点在每个设备上工作(响应)

Question

我开发了一个网站，我认为使用 Boostrap 4 来改善用户体验。

该网站主要供计算机使用，但我希望它可以在平板电脑或手机上使用。

为此，我在 bootstrap 网站上记录了自己，并做了几次测试，但我无法获得我想要的结果。

例如，我的网站(使用计算机)上的表单如下所示:

我希望当屏幕较小时(平板电脑(如 iPad)或移动设备)，字段名称(例如电子邮件)单独排成一行，并像 col-sm-12 类和字段 who与名称字段相关的在下面的行中，也取 col-sm-12。 由于手机屏幕非常小，如果用户使用手机或平板电脑，我还希望每行有一个字段(而不是目前的 2 个字段)。

从现在开始，我正在使用 Chrome 调试器进行测试，结果在 Ipad Pro(大平板电脑)或更高版本上运行良好。 我仍然需要为手机和平板电脑(比 Ipad Pro 小)修复它。

目前这是它在装有 Galaxy S5 的手机上的样子:

代码

    <div class="card-body">
        <div class="row col-12">
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                <div class="form-check-inline col-12">
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                        <label asp-for="Input.Email"></label>
                    </div>
                    <input asp-for="Input.Email" class="form-control" />
                </div>
                <div style="margin-left:33%">
                    <span asp-validation-for="Input.Email" class="text-danger"></span>
                </div>
                <div class="form-check-inline col-12" style="margin-top:1%">
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                        <label asp-for="Input.Password"></label>
                    </div>
                    <input asp-for="Input.Password" class="form-control" />
                </div>
                <div style="margin-left:33%">
                    <span asp-validation-for="Input.Password" class="text-danger"></span>
                </div>
                <div class="form-check-inline col-12" style="margin-top:1%">
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                        <label asp-for="Input.ConfirmPassword"></label>
                    </div>
                    <input asp-for="Input.ConfirmPassword" class="form-control" />
                </div>
            </div>
        </div>
    </div>

如您所见，它远非完美。

此外，它不占用卡的整体尺寸，所以它比它应该的最小，这是一种只在手机上占用整个空间的方法吗？

你能帮我看看如何得到想要的结果吗？

Answer 1

好吧，首先要说的是，大多数时候最好先为移动设备开发(设计)，因为现在大多数用户都在使用移动设备。它使得从移动设备扩展到桌面变得非常容易，因为您在此过程中拥有越来越多的空间。也就是说，您当前的标记还有很多需要改进的地方。

例如，一个元素永远不应同时具有 row 类和 column 类 (col-12)。 Imo 使用 Bootstrap 类构建字段的最佳方法是为每个输入字段和标签设置一个 row。然后，为每个元素创建一个 col 类，例如一个用于标签，一个用于输入。之后，您必须决定要使用哪些 cols。

大多数时候，您希望从移动 View 开始。在你的情况下，输入和标签可能应该占据 12 列(因为你想要那个全宽)。在这种情况下，您应该使用 col-12 类。因为您可能希望输入和标签在平板电脑和台式机上为一半大小，所以您还添加了 col-md-6 类。这将跨越 6 列的输入和标签，因此，2 乘以 6 是 12，因此它们将彼此相邻。您可以阅读有关这些专栏的更多信息 here .

为了说明，我创建了一个看起来像您想要的示例。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row">
  <div class="col-12 col-md-6">

    <div class="row">
      <div class="col-12 col-md-6">
        <label for="name">Name</label>
      </div>
      <div class="col-12 col-md-6">
        <input type="text" id="name" />
      </div>
    </div>

    <div class="row">
      <div class="col-12 col-md-6">
        <label for="phone">Phone</label>
      </div>
      <div class="col-12 col-md-6">
        <input type="text" id="phone" />
      </div>
    </div>

  </div>

  <div class="col-12 col-md-6">
    <div class="row">
      <div class="col-12 col-md-6">
        <label for="lastname">Lastname</label>
      </div>
      <div class="col-12 col-md-6">
        <input type="text" id="lastname" />
      </div>
    </div>

    <div class="row">
      <div class="col-12 col-md-6">
        <label for="email">E-mail</label>
      </div>
      <div class="col-12 col-md-6">
        <input type="text" id="email" />
      </div>
    </div>
  </div>
</div>