Question

在尝试使用html5的表单大小/ maxlength和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的推荐修复，感觉就像一个黑客。

  <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

更新这个问题已被浏览了很多，这是我写的关于它的博客文章！ 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虽然内置了宽度。

Answer 2

我使用cols来调整大量表单元素的宽度（特别是整个form-group s）。我只是称他们为class="skinny"，然后添加：

.skinny{
padding-left:0;
}

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

使用html输入大小/ maxlength和bootstrap的表单控件

2 个答案: