twitter-bootstrap 在引导程序的表单控件中使用 html 输入大小/最大长度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29105846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using html input size/maxlength with bootstrap's form-control
提问by
I came across an interesting issue when trying to use html5's form size/maxlength and bootstrap.
我在尝试使用 html5 的表单大小/最大长度和引导程序时遇到了一个有趣的问题。
The size is overridden by boostrap's .form-control class, but removing it causes the input to lose its styling.
大小被 boostrap 的 .form-control 类覆盖，但删除它会导致输入失去其样式。
Code pen : http://codepen.io/rkhayat/pen/JoeBqx
代码笔：http: //codepen.io/rkhayat/pen/JoeBqx
Thanks
谢谢
<div class="container">
<div class="form-group">
<p>Phone</p><input class="form-control" id="inputPhone" maxlength=
"3" name="phone" required="required" size="3" title="" type="tel"
value="">
</div>
</div><!--with form-control-->
<div class="container">
<p>Notice that removing form-control loses ALL styling, but keeps the
size from html size input</p>
</div>
<div class="container">
<div class="form-group">
<p>Phone</p><input id="inputPhone" maxlength="3" name="phone"
required="required" size="3" title="" type="tel" value="">
</div>
</div><!--without form-control-->
Edit: Researching I have found this http://getbootstrap.com/css/#column-sizing
编辑：研究我发现这个http://getbootstrap.com/css/#column-sizing
Implemented bootstrap's recommended fix, feels like a hack.
实施了引导程序的推荐修复，感觉就像一个黑客。
<div class="col-xs-4">
<div class="form-group">
<p>Phone</p>
<div class="col-xs-3">
<input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title="">
</div>
<div class="col-xs-3">
<input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title="">
</div>
<div class="col-xs-4">
<input type="tel" name="phone" class="form-control" value="" size="4" maxlength="4" required="required" title="">
</div>
</div>
</div>
采纳答案by
UpdateThis question has been viewed a lot, here's a blog post I wrote about it! http://blog.dnwebdev.com/index.php/2015/07/28/my-bootstrap-toolbelt-phone-number-input/
更新这个问题已经被查看了很多，这是我写的一篇博客文章！ http://blog.dnwebdev.com/index.php/2015/07/28/my-bootstrap-toolbelt-phone-number-input/
Fixed it with the following if anyone is interested. Thank you @web2tips for your input. (Refer to question for html)
如果有人感兴趣，请使用以下修复它。谢谢@web2tips 的意见。（参考 html 的问题）
.phone-number .col-xs-3::after{
content: "-";
position:absolute;
right: 5px;
color: black;
border: 0px solid;
top: 5px;
}
.phone-number .col-xs-4{
width:25%;
}
.phone-number .col-xs-3, .phone-number .col-xs-4{
padding-left:0;
}
It's a shame that bootstrap's .form-control has width built in though.
遗憾的是，bootstrap 的 .form-control 内置了宽度。
回答by BeNice
I use am using cols to size width of lots of form elements (particularly whole form-groups). I just call them class="skinny"and then add:
我使用 cols 来调整许多表单元素（特别是整个form-groups）的宽度。我只是打电话给他们class="skinny"，然后添加：
.skinny{
padding-left:0;
}
Works fine for me so far. have not tried for maxlength but this solve my major layout headache!
到目前为止对我来说效果很好。还没有尝试过 maxlength 但这解决了我主要的布局问题！
