如何使用自定义类覆盖Bootstrap 3中的表单控件类？

Question

我试图覆盖Bootstrap 3的表单控件类中的宽度.

片段:

<div class="col-xs-2">
         <label for="input-lastname" class="">Last Name</label>
         <input type="text" name="lastname" class="form-control my-form-inline" id="input-lastname" value="<?php  echo isset($_GET['lastname']) ? $_GET['lastname'] : 'empty';  ?>">
</div>...

我有这个:

.form-control {
    min-width: 0;
    width: 25px;
    color:red;
}

width从来没有工作,但color:red确实如此 使用Chrome中的开发者工具,我看到了哪里.form-control .form-inline有width:auto.一旦我取消选中width这些课程,我就会得到我的自定义课程.

我将自定义css作为最后加载的文件,所以顺序应该是正确的.

我试过了:

.form-control, .my-form-inline {
    min-width: 0;
    width: 25px;
    color:red;
}

.form-control {
    min-width: 0;
    width: 25px;
    color:red;
}

.form-control, .form-inline, .my-form-inline{
    min-width: 0;
    width: 25px;
    color:red;
}

我似乎能够覆盖除宽度之外的所有东西.我的表格是form-inline.

我已经尝试将表单控件放在带有col-md-2(和xs)的div中,但它似乎只影响标签,而不是输入.width:auto除非我在HTML中控制内联,否则我永远不能覆盖它.删除form-control该类还允许我按预期获取我的自定义类.

编辑:无论出于何种原因,forms.less mixin赢得了我最后加载的样式.

编辑:问题与我的特异性与Bootstrap有关.我在标题中有这个内联:

@media (min-width: 768px) {

    .form-inline .form-control {
      display: inline-block;
      width: auto;
      vertical-align: middle;
    }

    .my-form-inline
    {
        min-width: 0;
        width: 25px;
        color:red;
    }
}

但宽度仍然被我找不到的一些特殊性所覆盖.

Answer 1

尝试添加!important后width property value:

.form-control {
    min-width: 0;
    width: 25px !important;
    color:red;
}

Answer 2

我终于能够弄清楚了.我的特异性水平不正确,我的参考也是错误的.应该是:

.form-inline .my-form-inline
{
    min-width: 0;
    width: 25px;
    color:red;
}

它不需要在正确的@media部分.