Question

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

该站点主要用于计算机，但我希望可以在平板电脑或移动设备上使用它。

为此，我在引导站点上进行了记录，并进行了几次测试，但无法获得所需的结果。

例如，这是我的网站（使用计算机）上的表单的样子：

我希望当屏幕较小时（平板电脑（例如iPad）或移动设备），字段名称（例如Email）排成一行，并采用col-sm-12类，与名称字段相关，在下面一行，也取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用引导程序类构造字段的最好方法是为每个输入字段和标签都使用一个row。然后，对每个元素都有一个col类，例如一个用于标签，一个用于输入。之后，您必须确定要使用哪个cols。

大多数时候，您想从移动视图开始。在您的情况下，输入和标签可能应占用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>

如何使我的表单站点在每台设备上工作（响应式）

1 个答案: