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部分。

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

2 个答案: