如何解决为什么某些 Bootstrap 类和 CSS 属性在我的代码中不起作用?
在这里,我想通过 BOOTSTRAP 和 CSS 制作网站模板。但是在我的代码中,某些 bootstrap 类不起作用 像 lead,font-weight,color,bg-color 等。我不工作。我想在每个文本上使用相同的字体系列。但是如果我使用字体系列,那么引导类不起作用。以同样的方式,bootstrap font-weight-bold/bolder 正在工作,但 light/lighter 不起作用即使在 CSS 中,在这种情况下我该怎么办?
这是我的代码:
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--ALL LINK-->
<link rel="stylesheet" href="./bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="shortcut icon" href="./img/ia_100000000.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<title>AppAmp Health Tracker Demo</title>
</head>
<body>
<div class="section bg-light py-5">
<div class="container">
<div class="row">
<div class="col h1">
Our Team and History
</div>
</div>
<div class="row py-5">
<div class="col-xl-6 lead section1">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Debitis perspiciatis vero accusantium excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a odio,ad,officiis ex harum saepe fuga at modi quibusdam voluptas voluptatum!</div>
<div class="col-xl-6 lead font-weight-lighter">Lorem ipsum dolor sit amet,officiis ex harum saepe fuga at modi quibusdam voluptas voluptatum!</div>
</div>
</div>
</div>
</body>
</html>
CSS
p,span,h1,h2,h3,h4,h5,a,blockquote,i,button,li,div{
font-family: 'Work Sans',sans-serif;
}
.section1{
font-weight:400;
}
解决方法
如果您的字体系列不支持较轻或较轻的字体粗细,则不会呈现较轻的文本。这是关于字体系列。您应该为链接添加支持的字体权重
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
另一方面,我从 bootstrap 中尝试了以下文本类并且它正在工作。
<div class="col-xl-6 lead section1 text-danger">
Lorem ipsum dolor sit amet,consectetur adipisicing elit.
Debitis perspiciatis vero <span class="text-warning">accusantium</span>
excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a
odio,ad,officiis ex harum saepe fuga at modi quibusdam voluptas
voluptatum!
</div>
这是一支工作笔:https://codepen.io/umutcakirbm/pen/KKaqwVp
编辑:
Lead class 有这个属性
.lead {
font-size: 1.25rem;
font-weight: 300; // it will not work
}
如果你给额外的 font-weight-lighter/bolder/light 等,它会覆盖它,因为它有 !important
属性。
而且 text-*
类具有 !important
属性,因此您应该在自己的 css 中添加 !important
以覆盖文本类。像这样;
<span class="text-warning" style="color: #000 !important;">accusantium</span>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。