如何覆蓋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

檢查選擇器特異性值-嘗試添加！important-如果可行，則嘗試計算您和引導程序的選擇器特異性並進行比較。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

Answer 2

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

• 始終在基本css文件之后加載custom.css或style.css （無響應）。
• 盡可能避免使用！important 。 這可以覆蓋基本的一些重要樣式。
• 如果您不想丟失媒體查詢，請始終在custom.css之后加載bootstrap-sensitive.css。- 必須遵循
• 更喜歡修改必需的屬性（不是全部）...

如果您在bootstrap.css文件之前加載自定義css文件，則它將覆蓋您的自定義樣式。

希望您現在已經有了答案。

我們在組織中遵循這些最佳實踐，以實現最佳的自定義。

Answer 3

如果您的float:none處於活動狀態，但是元素顯示在右側或左側，則使用display:block或display:table 。 我認為此鏈接可以幫助您重寫默認的Bootstrap CSS https://bootstrapbay.com/blog/customize-bootstrap/

Answer 4

嘗試使用更高的特異性。 對於上面的HTML，您可以

select col-lg-2, select col-lg-10{
    float:none;
}

這將覆蓋引導樣式，因為它具有更高的特異性。

請參見不帶！important的覆蓋樣式