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

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-lg 和 input-group-sm 但这没有用。我尝试在包含不起作用的输入组的 div 容器周围放置填充和边距。我尝试将 overflow: hidden 设置为输入，但没有效果。除了一些数字或其他方法，到目前为止没有任何效果。我唯一成功的方法是在输入聚焦时监听 window.onscroll 事件，并在触发滚动事件后立即滚动回 X 平面中的 0 位置，即 window.scrollTo( 0, 窗口.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 中。一旦我在那个父 div 中插入 style="max-width:100%"，问题就解决了。