我正在尝试用我自己的影子类覆盖 Bootstrap shadow-sm
类。这是 Bootstrap 类。
出于某种原因我不想更改类名
.shadow-sm {
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}
我试图用我的自定义样式覆盖
.shadow-sm {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12)!important;
}
但只适用 Bootstrap 样式
现在我该如何覆盖?
.shadow-sm {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)!important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row m-2">
<div class="col-lg-6 col-6 p-1">
<a class="btn fb btn-block shadow-sm rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
</div>
</div>
</div>
我的自定义样式和 bootstrap 已有的类
尝试了下面的问题,但没有任何效果
How can I override Bootstrap CSS styles?
最佳答案
您需要在 Bootstrap css 文件之后添加指向您的 css 文件的链接。不需要使用 !important
那样做。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/styles.css" rel="stylesheet" />
<div class="container">
<div class="row m-2">
<div class="col-lg-6 col-6 p-1">
<a class="btn fb btn-block shadow-sm rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
</div>
</div>
</div>
关于html - 如何覆盖其类中已有 !important 的 Bootstrap 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57741623/