覆盖 Bootstrap 4 表单 CSS 类属性答案

【问题标题】：Override Bootstrap 4 Form CSS Class Properties覆盖 Bootstrap 4 表单 CSS 类属性
【发布时间】：2020-01-07 04:34:51
【问题描述】：

我正在尝试通过覆盖自定义控件标签类并将位置属性设置为自动而不是相对来设置使用引导程序 4 的 Web 框架中的复选框的样式。我可以在浏览器的开发工具中更改属性并获得我想要的结果，但是当我将样式添加到我的 custom.css 时，它不会覆盖在 _custom-forms.scss 中设置的属性。如何覆盖此属性？

#form

<div class="custom-control custom-checkbox">
  <input type="checkbox" name="custom_checkbox_name" class="checkboxinput custom-control-input" id="id_custom_checkbox">
  <label class="custom-control-label" for="id_custom_checkbox">
       <span class="custom-control-indicator"></span>
       <span class="custom-control-description">   Custom Checkbox Label</span>
  </label>
</div>

#custom.css

.custom-control-label {
    position: auto;
}

【问题讨论】：

position: auto 不是有效的属性developer.mozilla.org/en-US/docs/Web/CSS/position
尝试更具体地在您的 CSS 规则中添加类属性到您的表单并在您的 CSS 规则中使用，然后您就可以使用构建脚本编译您的 scss 文件了。

标签： css bootstrap-4 scss-mixins

【解决方案1】：

使用 !important 覆盖

.custom-control-label {
    position: unset !important;
}

【讨论】：

我不推荐使用!important，在这个问题的情况下可以使用CSS规则优先级覆盖它：tutorials.jenkov.com/css/precedence.html
没关系，我们都去过一次XD

【解决方案2】：

您可以使用 !important 覆盖引导 CSS 属性

.custom-control-label
{
  position: auto;
 }

【讨论】：

【解决方案3】：

这行得通。在我的 custom.css 文件的末尾，无需使用！important。感谢您的回复。

.custom-control-label {
    position: unset;
}

【讨论】：