Bootstrap 4 + 国际电话输入解决方法
Bootstrap 4 + Intl-Tel-Input Workaround
我正在尝试将 intl-tel-input 与 bootstrap 4 一起使用。但是,我根本看不到输入的占位符。关于这个问题,我几乎尝试了网上所有可用的解决方案,但不幸的是,none 有效。
这是我的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。
这个问题有什么解决方法吗?
这是因为 class 使您的输入宽度为 1%:
.input-group .form-control, .intl-tel-input { width: 100%; }
如果您覆盖该文件,您就可以看到它。
.iti{ width: 100%;}
这对我有用
我正在尝试将 intl-tel-input 与 bootstrap 4 一起使用。但是,我根本看不到输入的占位符。关于这个问题,我几乎尝试了网上所有可用的解决方案,但不幸的是,none 有效。
这是我的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。
这个问题有什么解决方法吗?
这是因为 class 使您的输入宽度为 1%:
.input-group .form-control, .intl-tel-input { width: 100%; }
如果您覆盖该文件,您就可以看到它。
.iti{ width: 100%;}
这对我有用