Bootstrap 5 的按钮文本是黑色而不是白色，就像他们的演示一样

Posted 2023-03-21

【中文标题】Bootstrap 5 的按钮文本是黑色而不是白色，就像他们的演示一样

【英文标题】：Bootstrap 5's Button Text is Black Instead of White Like their Demo

【发布时间】：2021-12-15 08:57:57

【问题描述】：

我不确定这是不是我在安装 Bootstrap 5 时做错了什么，但我的很多按钮都使用黑色字体而不是 Bootstrap 5 Documentation 上看到的白色字体

例如，Bootstrap 文档中的 .btn-primary 如下所示：

但是，当我使用相同的 html 时，我会得到以下结果：

他们和我的示例中的 HTML 参考如下：

<button type="button" class="btn btn-primary">Primary</button>

不仅文本颜色不同，背景颜色也不同。事实上，查看我编译的 .css 文件，代码中使用的大部分引导颜色具有类似于按钮中的蓝色的这种“褪色”外观。从 Chrome 开发工具来看，样式似乎来自 Bootstrap 文件本身，而不是来自我无意中应用的任何样式。 SCSS 正在通过正常的 Laravel 设置（webpack mix）编译成 CSS 文件。我只是将 NPM 包用于 bootstrap 5。

window.bootstrap = require('bootstrap'); 和 NPM 包"bootstrap": "^5.1.3",

我的 app.scss 文件没有太多内容：

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "~bootstrap-icons/font/bootstrap-icons";

// "Lobster" Font for H1's
@import "https://fonts.googleapis.com/css2?family=Cuprum&family=Lobster&display=swap";

// Flatpickr Styles
@import "~flatpickr/dist/flatpickr.min.css";

// Font Awesome Free
@import "~@fortawesome/fontawesome-free/css/all.min.css";

// DataTables Styles
@import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css";

h1 
    font-family: 'Lobster', cursive;


a.torn-link 
    color: $orange;


.ttt-title 
    font-family: 'Lobster', cursive;

.card-title 
    font-family: 'Cuprum', sans-serif;

html 
    background-color: #fff;
    color: #636b6f;

body 
    background-color: #fff;
    color: #636b6f;

.links 
    >a 
        color: #636b6f;
        padding: 0 25px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .1rem;
        text-decoration: none;
        text-transform: uppercase;
    

#settings-button 
    &:hover 
        fill: rgba(189, 189, 189, 0.25);
    

.ui-dialog-title 
    font-family: 'Cuprum', sans-serif;


thead, th 
    text-align: center;

编辑： 甚至所有 Bootstrap Colored 链接似乎都被洗掉了。例如，.link-warning 黄色是不可能使用的，因为颜色太褪色而无法阅读。而他们页面上的黄色是完全可读的。所以这甚至不是我只是不小心将样式应用于按钮或其他东西。

编辑2：

这是我的按钮在开发工具中的样子（注意颜色与 Bootstrap 5 文档的颜色不同

按钮 CSS 只是来自通过 webpack 生成的已编译 app.css 文件：

编辑 3：我的_variables.scss 文件：

// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

【问题讨论】：

您能否检查浏览器中的按钮并查看按钮颜色或按钮文本颜色的来源？

@SiddharthBhansali 我添加了一些与开发工具相关的图片。它只是来自我生成的app.css 文件，所以它并不能说明太多。作为补充说明，如果我向上滚动一堆，这些 CSS 属性实际上来自 Bootstrap 样式表。它正在编译到app.css 文件中。编译时似乎从 Bootstrap 文件中生成了这种颜色，我不知道为什么。

检查您的变量文件中的--bs-* 变量。

似乎是一个非常奇怪的问题，但是正如上面的评论所暗示的，打开你的_variables.scss，并检查分配给$blue的颜色作为初学者。

@SiddharthBhansali 是的，这似乎是问题所在。我在这里看到颜色变量。这个文件是我通过 NPM 安装引导程序时自动创建的，所以我不知道为什么将这些颜色添加到 scss 文件中。我猜引导程序已经内置了颜色集，所以我认为我可以安全地删除此处列出的所有颜色？

【参考方案1】：

在 _variables.scss 文件中，在将 Bootstrap 5 添加到 Laravel 8 时，看起来其中一个脚本添加了颜色，或者我在某个时候搞砸了，并在变量文件中添加了一个调色板。

变量文件中的所有颜色都类似于 Bootstrap 的默认颜色，但是是一个更加褪色的版本。这就是导致 Bootstrap 中使用这些变量的任何内容都被淘汰的原因。

只需删除我在_variables.scss 文件中定义的所有颜色即可解决问题。