CSS 如何使用自定义类覆盖 Bootstrap 3 中的表单控件类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30718747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I overwrite the form-control class in Bootstrap 3 with a custom class?
提问by johnny
I am trying to override the width in the form-control class of Bootstrap 3.
我正在尝试覆盖 Bootstrap 3 的表单控件类中的宽度。
Snippet:
片段：
<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>...
I have this:
我有这个：
.form-control {
min-width: 0;
width: 25px;
color:red;
}
widthnever works but the color:reddoes. Using the developer tools in Chrome, I see where .form-control.form-inlinehave width:auto. As soon as I uncheck widthin those classes, I get my custom class.
width从不工作，但color:red确实如此。使用 Chrome 中的开发人员工具，我看到哪里.form-control.form-inline有width:auto. 一旦我取消选中width这些类，我就会得到我的自定义类。
I have my custom css as the last file loaded, so the order should be right.
我有我的自定义 css 作为加载的最后一个文件，所以顺序应该是正确的。
I have tried:
我试过了：
.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;
}
I seem to be able to override everything but the width. My form's class is form-inline.
我似乎能够覆盖除宽度之外的所有内容。我的表单类是form-inline.
I have tried putting the form controls in a div with col-md-2(and xs), but it only seems to affect the label, not the input. I can never override the width:autounless I do it inline on the control in the HTML. Removing the form-controlclass also allows me, as expected, to get my custom class.
我试过将表单控件放在一个带有col-md-2（和 xs）的 div 中，但它似乎只影响标签，而不是输入。width:auto除非我在 HTML 中的控件上内联，否则我永远无法覆盖。form-control正如预期的那样，删除类还允许我获得自定义类。
EDIT: For whatever reason, the forms.less mixin is winning over the style I load last.
编辑：无论出于何种原因，forms.less mixin 都赢得了我最后加载的样式。
EDIT: The problem has to do with my specificity vs. Bootstrap's. I have this inline in the header:
编辑：问题与我与 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;
}
}
But the width is still overridden by some specificity I cannot find.
但是宽度仍然被我找不到的一些特殊性所覆盖。
回答by Kashif Ullah
Try to add !importantafter width property valueas:
尝试在!important之后添加width property value：
.form-control {
min-width: 0;
width: 25px !important;
color:red;
}
回答by johnny
I was finally able to figure this out. My level of specificity was incorrect, and my reference was also wrong. It should have been:
我终于能够弄清楚这一点。我的特异性水平不正确，我的参考文献也是错误的。本来应该是：
.form-inline .my-form-inline
{
min-width: 0;
width: 25px;
color:red;
}
It did not need to be in the correct @mediasection.
它不需要在正确的@media部分。
