[英]external style.css not working with bootstrap css
我是 HTML 和 CSS 的新手。 有两个名为“单击我”和“重置”的按钮,我试图在它们周围添加边框,但结果没有根据我的 style.css 文件更新。
.flex-box-container-1 { display: flex; border: 1px solid black; padding: 10px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-1"> <h2>Challenge 1: Your age in Days</h2> <div class="flex-box-container-1"> <div> <button class="btn btn-primary">Click me</button> </div> <div> <button class="btn btn-danger">reset</button> </div>
它工作正常。 确保 style.css 的路径正确。 或者简单地在 html 文件本身中添加样式。 它还将减少从服务器获取的文件数量。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<style>
.flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
</style>
<title>Challenges</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary">Click me</button>
</div>
<div>
<button class="btn btn-danger">reset</button>
</div>
</div>
</div>
<!-- <script src="static/JS/script.js"></script> -->
</body>
</html>
它工作正常。 确保 style.css 的路径正确有时您的路径没有在路径的开头点击正确的目录用户 (@) 符号。 或者像 Akshay 所说的那样,简单地在 html 文件本身中添加样式。 它还将减少从服务器获取的文件数量。
它工作正常。 检查文件位置。
如果您添加更多类来覆盖引导程序。 .container-1 .flex-box-container-1
添加样式
.container-1 .flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
即使有更多方法,使用!important
也不是好的做法。
它在我完全测试的本地文件中对我有用。
Working Demo
.container-1 .flex-box-container-1 { display: flex; border: 1px solid black; padding: 10px; }
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> <link rel="stylesheet" href="static/style/style.css" /> <title>Challenges</title> </head> <body> <div class="container-1"> <h2>Challenge 1: Your age in Days</h2> <div class="flex-box-container-1"> <div> <button class="btn btn-primary">Click me</button> </div> <div> <button class="btn btn-danger">reset</button> </div> </div> </div> <script src="static/JS/script.js"></script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.