Javascript 引导程序4+；国际电话输入解决方案

我正在尝试将intl tel输入与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>

和my

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

---

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

这是因为这个类正在以1%的宽度进行输入：

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

---

如果覆盖该文件，则可以看到它。

这是因为该类以1%的宽度进行输入：

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

.iti{ width: 100%;}

如果覆盖该文件，则可以看到它

.iti{ width: 100%;}

这对我有用

这对我有用

---

将.intl tel输入更改为width:100%，这样做是正确的。thnxchange.intl tel输入到宽度：100%，它将是这样做的。thnx