如何减少mdbootstrap中按钮的大小？

Question

我想减小按钮的默认大小，但仅减小字体大小。我想按比例减小字体大小和按钮大小。

我尝试减小字体按钮，然后字体大小与字体不成比例。

参考链接：https://mdbootstrap.com/components/buttons/

代码：

HTML：

<div class="standings">
    <div class="standingstitle">
        <h4>Teams Standings</h4>
        <button type="button" class="btn btn-danger">See all stats</button> 
    </div>
</div>

CSS：

.btn-danger{
    font-size: 6px;
    width: 25px;
    height: 30px;
}

屏幕截图：（按钮的默认大小）：

尝试上面的代码后给了我

Answer 1

您需要在默认的padding选择器中调整btn属性。试试这个代码。

.btn {
    padding: .4rem 1.5rem;
}

Answer 2

尝试使选择器更具体，以防止规则被覆盖：

btn btn-sm btn-danger {
    font-size: 6px;
    width: 25px;
    height: 30px;
}