Question

我目前有：

<input name="test" type="text" class="form-control" placeholder="Type here" size="4" maxlength="4">

但输入框仍然占据宽度的100％。

如果我删除了botostrap类form-control，那么我显然会丢失样式，但是该框占用了我想要的4个字符宽度。

如何使宽度为4，同时保持引导样式？

Answer 1

您可以使用class =＆＃34; form-control new-input＆＃34;简单地添加新类。如下所示

HTML

<input type="text" class="form-control new-input">

的CSS

.new-input{width:100px}

就是这样:)）

Answer 2

由于.form-control类，它是bootstrap默认类，你必须继承这个类。

例如： -

这是默认

.form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    width: 100%;

}

像这样使用： -

<div class="wrap">
   <input name="test" type="text" class="form-control" placeholder="Type here" size="4" maxlength="4">
<div>



.wrap .form-control {
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        color: #555;
        display: block;
        font-size: 14px;
        height: 34px;
        line-height: 1.42857;
        padding: 6px 12px;
        /*width: 100%;*/ remove this
}

希望我会帮助你。

Answer 3

添加本地样式，不知怎的样：

<input name="test" type="text" class="form-control" placeholder="Type here" style="width:<size value here>" maxlength="4">

Answer 4

HTML：

<div class="form-group">
        <input id="test" name="test" type="text" class="form-control" placeholder="Type here">
</div>

CSS：

.form-group #test{
    width:50%!important;
}

示例：jsFiddle

引导输入字段的大小

4 个答案: