我剛剛開始創建我的第一個 Bootstrap 項目。但是，我的 Bootstrap 按鈕的 CSS 不起作用。它沒有被應用。我想知道為什么，因為它在過去有效。我只想將按鈕設置為綠色。這是我的按鈕（我說的是藍色的按鈕）：這是我的代碼： button { padding-top: 200px; background-color: #388E3C; }<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-lg-6" id="function2"> <div class="input-group" id="input"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01"> <label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label> </div> </div> <button type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button> <!-- This is the button! --> </div> </div>我使用填充來檢查是否應用了任何內容。我感謝各種幫助。
5 回答
慕標琳琳
TA貢獻1830條經驗 獲得超9個贊
你可以通過多種方式解決它
使用
button.btn {....}這個button {....}應該可以解決你的問題。使用
selector按鈕的類，然后分配屬性（這就是我所做的）。
#cssBtn {
padding-top: 200px;
background-color: #388E3C;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6" id="function2">
<div class="input-group" id="input">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
</div>
</div>
<button type="button" id="cssBtn" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>
<!-- This is the button! -->
</div>
</div>
慕容森
TA貢獻1853條經驗 獲得超18個贊
這絕對是一個特殊性問題
您僅針對button元素，這不像類那么具體，這就是您的樣式不適用并且被引導程序的類覆蓋的原因。
將您自己的類添加到按鈕以應用您的樣式，或者定位按鈕 + 引導類。
我建議不要使用!important，這并不是真的必要
button.btn {
padding-top: 200px;
background-color: #388E3C;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6" id="function2">
<div class="input-group" id="input">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>
<!-- This is the button! -->
</div>
</div>
鴻蒙傳說
TA貢獻1865條經驗 獲得超7個贊
Boostrap 的 CSS 文件很可能會覆蓋您的 CSS 文件，請確保在 Boostrap 文件之后加載 CSS 文件。您最好為按鈕分配一個自定義類
<button id="customButton" type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>
然后將你的 CSS 設置為
button#customButton {
padding-top: 200px;
background-color: #388E3C;
}
侃侃爾雅
TA貢獻1801條經驗 獲得超16個贊
當我將您的確切 html 和 css 復制到環境中時，對我有用，我會說這是因為您已經在按鈕上附加了很多類
class="btn btn-primary btn-lg btn-block"
您可能需要編輯其中一些類，因為它們可能優先于按鈕本身
最好的方法就是去做
button {
padding-top: 200px!important;
background-color: #388E3C;
}
雖然重要不是最佳實踐，但這會給你答案
holdtom
TA貢獻1805條經驗 獲得超10個贊
如果您只需要綠色按鈕，則添加btn btn-success而不是btn btn-primary
<div class="container">
<div class="row">
<div class="col-lg-6" id="function2">
<div class="input-group" id="input">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01"
aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>
</div>
</div>
<button type="button" class="btn btn-success btn-lg btn-block">Convert p12 to jks</button> <!-- This is the button! -->
</div>
</div>
- 5 回答
- 0 關注
- 227 瀏覽
添加回答
舉報
0/150
提交
取消