Hen*_*nri 7 html jquery twitter-bootstrap
我想在订阅表单中输入电话号码并由图书馆进行验证intlTelInput，这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="flags.min.css">
<link rel="stylesheet" type="text/css" href="css2.css">
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="build/css/intlTelInput.css">
<script src="google/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="container">
<div class="row flex-grow">
<div class="col-xs-offset-1 col-xs-10 col-lg-12 col-lg-offset-0">
<div class="row" id="grad1">
<br>
<div class="col-xs-offset-1 col-xs-10 col-lg-offset-4 col-lg-4">
<form method="post" action="serv2.php" onsubmit="return submitForm(this);">
<fieldset>
<div class="row">
<div class="form-group phone">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone number" />
</div>
<div class="form-group country">
<input type="text" id="country" name="country" class="form-control" placeholder="Country" />
</div>
<div class="form-group col-lg-6 col-lg-offset-3">
<div>
<label for="bouton"><br></label>
<div>
<button type="submit" class="btn btn-default" style="background-color: #00B0F0; color:white; width: 100%;border:none;">Valider</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</html>
</body>
<script src="build/js/intlTelInput.min.js"></script>
<script>
$("#phone").intlTelInput({
initialCountry: "auto",
geoIpLookup: function(callback) {
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
});
},
utilsScript: "build/js/utils.js"
});
var telInput = $("#phone"),
errorMsg = $("#error-msg"),
validMsg = $("#valid-msg");
telInput.intlTelInput({
utilsScript: "build/js/utils.js"
});
</script>
问题是电话输入不像国内那样采用表格的全宽。
我尝试更改它，document.getElementById('phone').style.minWidth = 100%;但它删除了库的操作intlTelInput（即不再有标志图标）。
任何想法 ？
谢谢
小智 5
所以我最近使用包将其添加到我的 Angular 项目中ng2TelInput。所以我发现了同样的问题，我的 CSS 无法更改并且被卡住了。
即使您添加.iti { width: 100%; }了 CSS 类，这也不起作用，如文档中所述。您必须转到以下路径（确保您完全遵循该路径）：
node_modules/intl-tel-input/build/css/intlTelInput.css
并在那里添加以下代码，然后它就可以工作了。
node_modules/intl-tel-input/build/css/intlTelInput.css
好吧，我最终找到了答案，它在文档中，只需将类添加到容器中即可：
.intl-tel-input {
width: 100%;
}