我正在使用 Bootstrap 5.3.3 构建一个小型仪表板。 由于我在 BS 上使用本机组件,因此我正在处理原始 SASS,添加一些颜色更改和其他一些细微更改。
但是我很难将盒子阴影添加到卡片作为默认属性。
我的自定义.scss
// --------------------------------------------------
$input-btn-padding-x: .9rem;
$input-btn-padding-y: .45rem;
// -------------------------
$input-btn-padding-x-sm: .8rem;
$input-btn-padding-y-sm: .28rem;
// -------------------------
$input-btn-padding-x-lg: 1rem;
$input-btn-padding-y-lg: .5rem;
// --------------------------------------------------
@import "functions";
@import "variables";
// --------------------------------------------------
$primary: #907CF5;
$secondary: #6c757d;
$success: #0acf97;
$info: #39afd1;
$warning: #ffbc00;
$danger: #fa5c7c;
$light: #eef2f7;
$dark: #313a46;
// --------------------------------------------------
$theme-colors: map-merge($theme-colors, (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
));
// --------------------------------------------------
$min-contrast-ratio: 2.5;
// --------------------------------------------------
$border-radius: .15rem;
$border-radius-sm: .15rem;
$border-radius-lg: .15rem;
$border-radius-xl: .15rem;
$border-radius-xxl: .15rem;
// --------------------------------------------------
$body-bg: #fafbfe;
// --------------------------------------------------
$font-family-sans-serif: "Asap", sans-serif;
$font-size-root: 14px;
// --------------------------------------------------
@import "bootstrap";
// --------------------------------------------------
效果完美!
但是当我添加:
$card-box-shadow: 0 0 34px 0 rgba(154, 161, 171, 0.14);
它的处理方式(在卡片组件内正确)就像
--bs-card-box-shadow: 0 0 34px 0 rgba(154, 161, 171, 0.14);
但是它没有在浏览器上渲染。
我做错了什么? 有什么想法吗?
谢谢!
由于默认情况下阴影是禁用的,因此您需要先启用它们,因此请尝试设置:
$enable-shadows: true;
或者您可以明确地将其仅分配给卡片组件。
参见:
虽然 Bootstrap 中默认禁用组件上的阴影,但 可以通过 $enable-shadows 启用,
https://getbootstrap.com/docs/5.3/utilities/shadows/#examples