时间戳

首页 > 解决方案 > IOS上Chrome中的Bootstrap 4输入字段间距

ios - IOS上Chrome中的Bootstrap 4输入字段间距

问题描述

我有一个我似乎无法弄清楚的问题。我有一个用于四个文本输入字段的简单表单。除了 IOS 上的 Chrome 之外，所有浏览器的间距看起来都很棒。输入字段之间的间距似乎被忽略了。

我正在使用 Bootstrap 4。这是 HTML：

<div class="form-row">
  <div class="col-md-2 col-lg-2 col-sm-5 col-6 pt-2">
   <input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="First name">
  </div>
<div class="col-md-2 col-lg-2 col-sm-5 col-6 pt-2">
  <input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="Last name">
</div>                      
<div class="col-md-3 col-lg-3 col-sm-3 col-6 pt-2">
  <input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="E-Mail">
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-6 pt-2">
    <input type="tel" class="form-control form-control-sm rounded bg-color-light-gray2" placeholder="Zip Code" name="loanzip" id="loanzip" maxlength="5" value="" />
</div>
<div class="col-md-3 col-lg-3 col-sm-5 col-12 search-results pt-2">
  <button type="submit" class="btn btn-success btn-block btn-sm rounded font-size-15">Get Approved <i class="fa fa-thumbs-up" aria-hidden="true">    </i></button>
</div>

当它在其他任何地方看起来都很好时，真是令人沮丧。

随附的是 IOS 上 Chrome 的屏幕截图。

谢谢你的帮助！

蒂姆

chrome IOS截图

这是在移动Safari上...

移动 Safari 截图

最新的 HTML，但仅在 IOS Chrome 上的按钮后留下额外的间距。

<form name="carloan" id="carloan" action="car-loan-application/" method="post">
<div class="row ml-2 mr-2">
<div class="col-6 col-xl-2 mb-2">
  <input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="First Name">
</div>
<div class="col-6 col-xl-2 mb-2">
  <input type="text" class="form-control form-control-sm bg-color-light-gray2" placeholder="Last Name">
</div>
<div class="col-6 col-xl-2 mb-2">
  <input type="email" class="form-control form-control-sm bg-color-light-gray2" placeholder="E-Mail">
</div>
<div class="col-6 col-xl-2 mb-2">
  <input type="tel" class="form-control form-control-sm bg-color-light-gray2" placeholder="Zip Code">
</div>
<div class="col-12 col-xl-4 mb-2 search-results">
    <button type="submit" class="btn btn-success btn-block btn-sm rounded font-size-15">Get Approved <i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
</div>
</div>
</form>

在此处输入图像描述

标签： iosgoogle-chromebootstrap-4

解决方案

在您的代码中，我可以看到您使用col-md-3的是平板电脑，您将根据 IOS 设备的宽度使用“col-xs（纵向设备）或 col-sm（横向设备）”。form-group或者您可以只为您的 div使用媒体查询或 bootstrap 4类（以获得正确的视图）。例如

<div class="form-group"> input or form button... </div>

推荐阅读