Bootstrap 4 + Intl-Tel-Input 解决方法答案

【问题标题】：Bootstrap 4 + Intl-Tel-Input WorkaroundBootstrap 4 + Intl-Tel-Input 解决方法
【发布时间】：2017-09-11 18:42:02
【问题描述】：

我正在尝试将 intl-tel-input 与 bootstrap 4 一起使用。但是，我根本看不到输入的占位符。关于这个问题，我几乎尝试了网上所有可用的解决方案，但不幸的是，没有一个奏效。

这是我的HTML

<div class="form-row">
  <div class="form-group col-sm-12">
    <label for="quote-phone" class="sr-only">Mobile Number</label>
    <div class="input-group input-group-lg">
      <input id="phone" type="tel" class="form-control" placeholder="Phone Number">
      <div class="invalid-feedback">
        Please provide a phone number.
      </div>
    </div>
  </div>
</div>

这是我的CSS

  .iti-flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/img/flags.png");
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2 / 1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
    .iti-flag {
      background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/img/flags@2x.png");
    }
  }

还有我的JS 来初始化插件：

$("#phone").intlTelInput({
  utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/js/utils.js",
  allowDropdown: true
});

我唯一能看到占位符的时间是当我这样做的时候：

#phone{
width:100%;
}

但它仍然没有明显覆盖整行。

这里是 JSFiddle link。

有解决这个问题的办法吗？

【问题讨论】：

标签： javascript html css bootstrap-4 intl-tel-input

【解决方案1】：

这是因为这个类以 1% 的宽度输入：

.input-group .form-control, .intl-tel-input { width: 100%; }

如果你覆盖了那个文件，那么你可以看到它。

【讨论】：

将 .intl-tel-input 更改为 width: 100% 会
是的，做到了。谢谢

【解决方案2】：

.iti{ width: 100%;}

这对我有用

【讨论】：