iOS上Chrome中的Bootstrap 4输入字段间距

Question

我有一个似乎无法解决的问题。我有四个文本输入字段的简单表单。除了IOS上的Chrome以外，所有浏览器上的间距看起来都很不错。输入字段之间的间距似乎只是被忽略了。

我正在使用Bootstrap4。这是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的屏幕截图。

感谢您的帮助！

蒂姆

这里是在移动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>

Answer 1

在您的代码中，我可以看到您在平板电脑上使用hc.ward2.transform.euclidean <- hclust(d = dist.transform.euclidean, method = "ward.D2") hc.ward2.transform.euclidean$height ，根据IOS设备上的宽度，您将使用“ col-xs（纵向设备）或col-sm（横向设备）” 。或者，您可以仅对div使用媒体查询或bootstrap 4 col-md-3类（以获得正确的视图）。例如

form-group