外部 style.css 不适用于 bootstrap css
[英]external style.css not working with bootstrap css
问题描述
I am new in HTML and CSS.
我是 HTML 和 CSS 的新手。 There are two buttons named 'Click me' and 'reset' and I was trying to add a border around them but the result is not updating according to my style.css file.有两个名为“单击我”和“重置”的按钮，我试图在它们周围添加边框，但结果没有根据我的 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>
3 个解决方案
解决方案1
1 2020-09-26 07:27:31
It is working correctly.它工作正常。 Make sure path of style.css is correct.确保 style.css 的路径正确。 Or simply add style in the html file itself.或者简单地在 html 文件本身中添加样式。 It will also reduce the number of files to be fetched from server.它还将减少从服务器获取的文件数量。
<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>
解决方案2
1 2020-09-26 07:49:24
It is working correctly.它工作正常。 Make sure path of style.css is correct Sometimes your path is not hitting the proper directory user (@) symbol at the start of the path .确保 style.css 的路径正确有时您的路径没有在路径的开头点击正确的目录用户 (@) 符号。 Or simply add style in the html file itself like Akshay said.或者像 Akshay 所说的那样，简单地在 html 文件本身中添加样式。 It will also reduce the number of files to be fetched from server.它还将减少从服务器获取的文件数量。
解决方案3
0 2020-09-26 07:21:18
It worked correctly.它工作正常。 check the file location.检查文件位置。
If you Add more class to override bootstrap.如果您添加更多类来覆盖引导程序。 That is add style to .container-1 .flex-box-container-1 .container-1 .flex-box-container-1添加样式
.container-1 .flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
Using !important not good practice even when there are more ways.即使有更多方法，使用!important也不是好的做法。
It works for me in local file i tested compeletly.它在我完全测试的本地文件中对我有用。
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.