css - Bootstrap 输入字段的大小

Question

我目前有:

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

但是输入框还是占了100%的宽度。

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

如何让它的宽度为 4，同时保持 Bootstrap 样式？

Answer 1

因为.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
}

希望我能帮到你。