外部 style.css 不適用於 bootstrap css

Question

我是 HTML 和 CSS 的新手。 有兩個名為“單擊我”和“重置”的按鈕，我試圖在它們周圍添加邊框，但結果沒有根據我的 style.css 文件更新。

 .flex-box-container-1 { display: flex; border: 1px solid black; padding: 10px; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-1"> <h2>Challenge 1: Your age in Days</h2> <div class="flex-box-container-1"> <div> <button class="btn btn-primary">Click me</button> </div> <div> <button class="btn btn-danger">reset</button> </div>

Answer 1

它工作正常。 確保 style.css 的路徑正確。 或者簡單地在 html 文件本身中添加樣式。 它還將減少從服務器獲取的文件數量。

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
  />
  <style>
    .flex-box-container-1 {
     display: flex;
     border: 1px solid black;
     padding: 10px;
   }
 </style>
 <title>Challenges</title>

</head>
<body>
 <div class="container-1">
  <h2>Challenge 1: Your age in Days</h2>
  <div class="flex-box-container-1">
    <div>
      <button class="btn btn-primary">Click me</button>
    </div>
    <div>
      <button class="btn btn-danger">reset</button>
    </div>
  </div>
</div>
<!-- <script src="static/JS/script.js"></script> -->
</body>
</html>

Answer 2

它工作正常。 確保 style.css 的路徑正確有時您的路徑沒有在路徑的開頭點擊正確的目錄用戶 (@) 符號。 或者像 Akshay 所說的那樣，簡單地在 html 文件本身中添加樣式。 它還將減少從服務器獲取的文件數量。

Answer 3

它工作正常。 檢查文件位置。

如果您添加更多類來覆蓋引導程序。 .container-1 .flex-box-container-1添加樣式

.container-1 .flex-box-container-1 {
   display: flex;
   border: 1px solid black;
   padding: 10px;
}

即使有更多方法，使用!important也不是好的做法。

它在我完全測試的本地文件中對我有用。

Working Demo

 .container-1 .flex-box-container-1 { display: flex; border: 1px solid black; padding: 10px; }

 <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> <link rel="stylesheet" href="static/style/style.css" /> <title>Challenges</title> </head> <body> <div class="container-1"> <h2>Challenge 1: Your age in Days</h2> <div class="flex-box-container-1"> <div> <button class="btn btn-primary">Click me</button> </div> <div> <button class="btn btn-danger">reset</button> </div> </div> </div> <script src="static/JS/script.js"></script> </body> </html>

外部 style.css 不適用於 bootstrap css

問題描述

3 個解決方案

解決方案1
1 2020-09-26 07:27:31

解決方案2
1 2020-09-26 07:49:24

解決方案3
0 2020-09-26 07:21:18

外部 style.css 不適用於 bootstrap css

問題描述

3 個解決方案

解決方案1 1 2020-09-26 07:27:31

解決方案2 1 2020-09-26 07:49:24

解決方案3 0 2020-09-26 07:21:18

解決方案1
1 2020-09-26 07:27:31

解決方案2
1 2020-09-26 07:49:24

解決方案3
0 2020-09-26 07:21:18