Question

我的cshtml中有一个输入组，其中包含一个Bootstrap插件。插件位于表单控件的前面。在移动设备上，聚焦后，页面会水平向右滚动，可以看到页面的右边距。它在页面外滚动并停留在那里，直到输入框失去焦点，然后页面再次居中。当输入获得焦点时，如何使页面居中？我的代码：

<div class="col-xs-12 text-left m-b-20" data-bind="validationElement: hin">
  <div>
    <span id="hin"
      data-bind="resourceText: 'Resource/File/Path/HIN', css: { error: hin.isModified() && !hin.isValid() }"></span>
  </div>

  <div class="input-group">
    <span class="input-group-addon" style="background-color: white;" id="basic-addon3"><b>C</b></span>

    <input id="hinInput" type="text" inputmode="numeric" class="form-control" aria-describedby="basic-addon3"
      placeholder="HIN" data-bind="validationOptions: {insertMessages: false}"
      onfocus="document.getElementById('hin').classList.add('focused');"
      onblur="document.getElementById('hin').classList.remove('focused');" autocomplete="off" />
  </div>

  <p class="validationMessage" data-bind="validationText: hin"></p>
</div>

我已经尝试将字体大小设置为16px，以防止可能发生的任何缩放，但是这种缩放不起作用。我尝试为input-group类包括一个调整大小的选项，即input-group-lg和input-group-sm，但是没有用。我尝试在包含无效输入组的div容器周围放置填充和边距。我尝试将overflow: hidden设置为输入，但这没有任何效果。除了许多方法或其他方法，到目前为止没有任何效果。我唯一成功的方法是，当输入被聚焦并且侦听滚动事件时，监听window.onscroll事件，立即滚动回到X平面的0位置，即window.scrollTo(0, window.pageYOffset)。这会使页面居中，但是由于2个连续的滚动事件，它具有不希望的屏幕“晃动”效果。为什么滚动会在移动设备上发生，有什么方法可以避免它？

编辑：这是输入元素类的CSS

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9dce5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

更多CSS用于输入组引导类。请注意，由于此代码是为大型公司指定的，因此这些类的属性分散在.css文件中的各个语句中，并按它们与其他类共享的属性进行分组。

`.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group[class*="col-"] {
  float: none;
  padding-left: 0;
  padding-right: 0;
}
.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}
.input-group .form-control:focus {
  z-index: 3;`

Answer 1

此div嵌套在具有CSS class=row的另一个div中。将style="max-width:100%"插入该父div后，问题就解决了。

Bootstrap插件导致页面在移动设备上水平滚动

1 个答案: