使用带有引导程序的表单控件的 html 输入大小/最大长度答案

【问题标题】：Using html input size/maxlength with bootstrap's form-control使用带有引导程序的表单控件的 html 输入大小/最大长度
【发布时间】：2015-05-20 06:43:42
【问题描述】：

我在尝试使用 html5 的表单大小/最大长度和引导时遇到了一个有趣的问题。

boostrap 的 .form-control 类会覆盖大小，但删除它会导致输入失去其样式。

代码笔：http://codepen.io/rkhayat/pen/JoeBqx

谢谢

 <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-->

编辑：研究我发现了这个http://getbootstrap.com/css/#column-sizing

实施了引导程序的推荐修复，感觉就像一个 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>

【问题讨论】：

如果你想控制输入元素的宽度，那么你可以使用 Bootstrap 的 col-* 或者你可以使用内联样式。
感谢@web2tips，我用更新的codepen做到了，但感觉“hacky”

标签： css html forms twitter-bootstrap input

【解决方案1】：

我使用 cols 来调整许多表单元素的宽度（尤其是整个 form-groups）。我只是打电话给他们class="skinny" 然后添加：

.skinny{
padding-left:0;
}

到目前为止对我来说效果很好。没有尝试过 maxlength 但这解决了我的主要布局问题！

【讨论】：

【解决方案2】：

更新这个问题已经被浏览了很多，这是我写的一篇博客文章！ http://blog.dnwebdev.com/index.php/2015/07/28/my-bootstrap-toolbelt-phone-number-input/

如果有人感兴趣，请使用以下内容进行修复。感谢@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;
}

很遗憾，bootstrap 的 .form-control 内置了宽度。

【讨论】：