[英]Bootstrap 4 + Intl-Tel-Input Workaround
I am trying to use the intl-tel-input with bootstrap 4. However, I am not able to see the placeholder for the input at all.我正在尝试将 intl-tel-input 与 bootstrap 4 一起使用。但是,我根本看不到输入的占位符。 I tried almost all the solution available on the net on this matter but unfortunately, none worked.
关于这个问题,我尝试了网上几乎所有可用的解决方案,但不幸的是,没有一个奏效。
This is my HTML
这是我的
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>
This is my CSS
这是我的
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");
}
}
And my JS
to initialize the plugin:和我的
JS
来初始化插件:
$("#phone").intlTelInput({
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/js/utils.js",
allowDropdown: true
});
The only time I get to see the placeholder is when I do this:我唯一一次看到占位符是当我这样做时:
#phone{
width:100%;
}
But it still doesn't cover the whole row obviously.但它仍然没有明显覆盖整行。
Here is the JSFiddle link .这是 JSFiddle链接。
Any workarounds to this problem?这个问题的任何解决方法?
It's because this class is making your input at 1% width: 这是因为此类使您的输入宽度为1%:
.input-group .form-control, .intl-tel-input { width: 100%; }
If you overwrite that file, then you can see it. 如果覆盖该文件,则可以看到它。
if you are not using input-group or form-control just add below property如果您不使用输入组或表单控件,只需添加以下属性
.intl-tel-input { width: 100%; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.