如何覆盖Bootstrap的默认css样式规则

Question

​

我的表单标签应用了以下默认样式：

  @media (min-width: 1200px)
   .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
    }

那么，我如何通过使{float:none;}来覆盖它呢？如果我写了一堂新课，它还是不会上。

我试过:在custom.css中：

  @media (min-width: 1200px){.form-label-float{float:none;}}

这不管用！

html：

css的顺序：

<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<link rel="stylesheet/less" type="text/css" href="../css/bootswatch.less"/>
<link rel="stylesheet/less" type="text/css" href="../css/variables.less"/>
<link rel="stylesheet" type="text/css" href="../css/custom.css"/>

 <div id="passCode"></div>
  <form class="form-horizontal">
<fieldset>
    <legend style="color:#145FAC">Please Fill in the Online Form</legend>
    <div class="form-group">
        <label for="inputEmail" class="col-lg-2 control-label">Name</label>
        <div class="col-lg-10">
            <input type="text" class="form-control formWidth" id="inputName" placeholder="Nam" />
        </div>...</div>
</fieldset>
  </form>

Answer 1

检查选择器的特异性值--尝试添加！重要的--如果它有效，请尝试计算您的选择程序和引导程序的特定性并进行比较。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

​

​

Answer 2

以下是一些需要遵循的最佳做法：

• 始终在基本css文件之后加载custom.css或style.css (没有响应)。
• 如果可能，避免使用！重要的。它可以覆盖一些重要的基本样式。
• 如果您不想丢失媒体查询，请始终在custom.css之后加载引导-responsive.css。-必须跟随
• 更喜欢修改所需的属性(不是全部).

如果您在bootstrap.css文件之前加载自定义css文件，那么它将覆盖您的自定义样式。

我希望你现在已经知道答案了..。

在我们的组织中，我们遵循这些最佳实践来实现最佳定制。

Answer 3

如果您的float:none活动，但元素显示在右侧或左侧，则使用display:block或display:table。我认为这个链接可以帮助您重写默认的引导css https://bootstrapbay.com/blog/customize-bootstrap/。