css - 如果链接了 Bootstrap CSS,则自定义 CSS 样式规则仅在添加到样式标签时适用

标签 css bootstrap-4

我正在处理上述问题。

我将 Bootstrap CSS 用于我正在处理的自定义布局,当然我需要应用我自己的自定义 CSS 样式。

如果我链接 bootstrap.min.css 和上面我链接我的 style.css,我的自定义规则不适用。

但是,如果我链接 bootstrap.min.css 及以上,我在标签中添加自定义规则,它们将正常工作。我用的是自己的ID和类,我已经检查过文件路径是否正确。

我在 HTML 文件的 head 标签内添加了我尝试过的两种方法的示例:

这行不通

<!-- Required meta tags -->

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="icon" href="favicon.ico">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel=“stylesheet” href=“css/style.css“>

这行得通

<!-- Required meta tags -->

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="icon" href="favicon.ico">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style>
 [custom css rules]
    .
    . 
    .
</style>

你知道为什么会这样吗?

提前致谢!

最佳答案

尝试 <link href="css/custom.css" type="text/css" rel="stylesheet" />

关于css - 如果链接了 Bootstrap CSS,则自定义 CSS 样式规则仅在添加到样式标签时适用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50097250/

相关文章:

javascript - 是否可以在 jQuery 或 CSS 中修复图片的像素?

html - 导航栏中图像的垂直对齐

html - Bootstrap 4.0 input-group-append 和 prepend 显示错误的高度

html - Highcharts 网络图箭头链接

twitter-bootstrap - 添加 XXL 和 XXXL 断点。什么是容器最大宽度?

asp.net - 在html中限制列宽

html - 我无法对齐顶部或中间的 Textarea 标签

CSS- Bigcartel Logo 和 Navigation 在同一条线上?

javascript - 将显示从 block 更改为无,然后淡入

html - 单击整个标题 div 时如何使 Bootstrap v4 Accordion 折叠?