無法更改Bootstrap按鈕

Question

<button class="btn btn-default">Click me</button>

我想通過將它的填充減少到0px來改變這個按鈕，所以我在style.css中添加了一個額外的類no-padding

.no-padding {
   padding-left: 0;
   padding-right: 0;
}

並稱之為

<button class="btn btn-default no-padding">Click me</button>

但是我仍然得到同一個類，如果我使用內聯樣式語句，它工作得很好，但我不想這樣做

謝謝！！

Answer 1

您可以使用Bootstrap填充類。

1> px：左右填充。 2> py：頂部和底部填充。

查看下面給出的更多示例

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> Your Button as it is : <button class="btn btn-default ">Click me</button> <br/> <br/> Button with px class : <button class="btn btn-primary px-0">Click me</button> <br/> <br/> Button with py class <button class="btn btn-warning py-0">Click me</button> <br/> <br/> Button with px and py class : <button class="btn btn-success px-0 py-0">Click me</button> <br/> <br/> Button with pl class <button class="btn btn-danger pl-0">Click me</button> <br/> <br/> Button with pr class : <button class="btn btn-success pr-0">Click me</button> 

Answer 2

為此你需要知道CSS的specificity概念

你可以這樣做

button.no-padding {
   padding-left: 0;
   padding-rigt: 0;
}

你的CSS工作正常。 您會在下面的代碼段中看到不同之處

 button.no-padding { padding-left: 0; padding-right: 0; } .no-padding1 { padding-left: 0; padding-right: 0; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <button class="btn btn-default no-padding">Click me</button> <button class="btn btn-default no-padding1">Click me</button>