html - 如何覆盖 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;}来覆盖它呢？如果我写了一个新类(class)，它仍然没有接受它。

我试过:在 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

检查选择器特异性值 - 尝试添加 !important - 如果有效，则尝试计算你的和 Bootstrap 的选择器特异性并进行比较。

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