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

为此，您需要了解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>

Answer 2

您可以使用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>

无法更改引导按钮

2 个答案: