css - 将 html 输入大小/最大长度与 Bootstrap 的表单控件一起使用

Question

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

大小被 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

实现了 bootstrap 推荐的修复，感觉像是一个 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>

Answer 1

我使用 cols 来调整大量表单元素(尤其是整个 form-group)的宽度。我只是称它们为 class="skinny" 然后添加:

.skinny{
padding-left:0;
}

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