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

xfb7svmp  于 2022-12-05  发布在  Bootstrap
关注(0)|答案(2)|浏览(231)

我不确定这是不是我在安装Bootstrap 5时做错了什么,但是我的很多按钮都使用黑色字体,而不是Bootstrap 5 Documentation上看到的白色字体
例如,Bootstrap文档上的.btn-primary如下所示:

然而,当我使用相同的HTML时,我得到的结果是:

作为参考,他们的例子和我的例子中的HTML是:

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

不仅仅是文本颜色不同,背景颜色也不一样。事实上,通过我编译的.css文件,代码中使用的引导程序颜色有很大一部分是“褪色”的,类似于按钮中的蓝色。从Chrome开发工具来看,这种风格似乎来自引导程序文件本身。不是从我无意中应用的任何风格。SCSS正在通过正常的Laravel设置(webpack混合)编译成CSS文件。我只是使用引导程序5的NPM包。
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;
nzk0hqpo

nzk0hqpo1#

_variables.scss文件中,在将Bootstrap 5添加到Laravel 8的某个点上,看起来像是其中一个脚本添加了颜色,或者我在某个点上搞砸了,将调色板添加到变量文件中。
变量文件中的所有颜色都与Bootstrap的默认颜色相似,但颜色更淡。这就是导致Bootstrap中使用这些变量的任何内容都显得褪色的原因。
只需删除我在_variables.scss文件中定义的所有颜色就可以解决这个问题。

6kkfgxo0

6kkfgxo02#

谢谢你的回答ComputerLocus,我也遇到了同样的问题。由于我不能添加评论,由于声誉,我会写这个答案。
所述的解决方案是正确的。更详细地说,您需要访问_variables.scss,它可以在resources/sass/中找到。一旦您删除了冲突的声明颜色,您将需要在终端的主项目目录中运行npm run dev。如果更改仍然没有显示,请使用ctrl + F5刷新您的页面。
就是这样,朋友们:)

相关问题