我剛剛開始創(chuàng)建我的第一個(gè) Bootstrap 項(xiàng)目。但是，我的 Bootstrap 按鈕的 CSS 不起作用。它沒有被應(yīng)用。我想知道為什么，因?yàn)樗谶^去有效。我只想將按鈕設(shè)置為綠色。這是我的按鈕（我說的是藍(lán)色的按鈕）：這是我的代碼： 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>我使用填充來檢查是否應(yīng)用了任何內(nèi)容。我感謝各種幫助。
5 回答
慕標(biāo)琳琳
TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊
你可以通過多種方式解決它
使用
button.btn {....}這個(gè)button {....}應(yīng)該可以解決你的問題。使用
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貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超18個(gè)贊
這絕對(duì)是一個(gè)特殊性問題
您僅針對(duì)button元素，這不像類那么具體，這就是您的樣式不適用并且被引導(dǎo)程序的類覆蓋的原因。
將您自己的類添加到按鈕以應(yīng)用您的樣式，或者定位按鈕 + 引導(dǎo)類。
我建議不要使用!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貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
Boostrap 的 CSS 文件很可能會(huì)覆蓋您的 CSS 文件，請(qǐng)確保在 Boostrap 文件之后加載 CSS 文件。您最好為按鈕分配一個(gè)自定義類
<button id="customButton" type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>
然后將你的 CSS 設(shè)置為
button#customButton {
padding-top: 200px;
background-color: #388E3C;
}
侃侃爾雅
TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超16個(gè)贊
當(dāng)我將您的確切 html 和 css 復(fù)制到環(huán)境中時(shí)，對(duì)我有用，我會(huì)說這是因?yàn)槟呀?jīng)在按鈕上附加了很多類
class="btn btn-primary btn-lg btn-block"
您可能需要編輯其中一些類，因?yàn)樗鼈兛赡軆?yōu)先于按鈕本身
最好的方法就是去做
button {
padding-top: 200px!important;
background-color: #388E3C;
}
雖然重要不是最佳實(shí)踐，但這會(huì)給你答案
holdtom
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊
如果您只需要綠色按鈕，則添加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 關(guān)注
- 239 瀏覽
添加回答
舉報(bào)
0/150
提交
取消