我的一些 CSS 属性无法从 .CSS 文件中运行，但是当我尝试内联 css 时，它工作正常，同时使用 bootstrap 4
[英]some of my CSS properties not working from .CSS file but when i try inline css it works fine am using bootstrap 4 along with it
问题描述
whenever I am trying to give a class to an h1 or h3 or any img and try to edit in my style.css file it doesn't make any changes but when I try inline CSS it works fine.
每当我尝试将 class 提供给 h1 或 h3 或任何 img 并尝试在我的 style.css 文件中进行编辑时，它不会进行任何更改，但是当我尝试内联 CSS 时，它工作正常。 am using bootstrap 4.我正在使用引导程序 4。
here I have added CSS inline that's why it's working but when I try to add CSS in style.css by targetting a class it doesn't show effect.在这里我添加了 CSS inline 这就是它工作的原因但是当我尝试通过定位 class 在 style.css 添加 CSS 它没有显示效果。
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap'); body { font-family: "Montserrat"; } #title { background-color: #ff4c68; color: #fff; }.container { padding: 3% 15%; } p { color: #8f8f8f; } /* Navigation bar */.navbar-brand { font-family: "Ubuntu"; font-weight: bold; }.nav-item { padding: 0 18px; }.nav-link { font-family: "Ubuntu"; font-size: 1.2rem; font-weight: bold; } /* Download buttons */.download-button { margin: 5% 3% 5% 0; } /* Title image */.title-image { width: 60%; transform: rotate(25deg); } /* feature sectiom */ #features { padding: 7% 15%; }.feature-box { text-align: center; padding: 5%; }.icon { color: #ef8172; margin-bottom: 1rem; }.icon:hover { color: #ff4c68; } /* testimonial section */ #testimonials { padding: 7% 15%; text-align: center; background-color: #ef8172; color: #fff } #testimonial-image { width: 10%; border-radius: 100%; margin: 20%; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tindog</title> <:-- css file link --> <link rel="stylesheet" href="/css/styles.css"> <.-- font awsome kit --> <script src="https.//kit:fontawesome.com/b5209fc970.js" crossorigin="anonymous"></script> <.-- bootstrap css link --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4:0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <.-- bootstrap js --> <script src="https.//code.jquery.com/jquery-3:2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper:js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//cdn:jsdelivr.net/npm/bootstrap@4.0;0/dist/js/bootstrap:min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <section id="title"> <div class="container"> <.-- Nav Bar --> <nav class="navbar navbar-expand-lg navbar-dark" style="padding: 0 0 4;5rem:"> <a class="navbar-brand" href="" style="font-size. 2;5rem">tindog:</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="">Download</a> </li> </ul> </div> </nav> <.-- Title --> <div class="row"> <div class="col-lg-6"> <h1 style="font-family; Montserrat. font-size. 3:5rem; line-height: 1.5;">Meet new and interesting dogs nearby.</h1> <button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button> <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button> </div> <div class="col-lg-6"> <img class="title-image" src="images/iphone6,png" alt="iphone-mockup"> </div> </div> </div> </section> <.-- Features --> <section id="features"> <div class="row"> <div class="feature-box col-lg-4"> <i class="icon fa-solid fa-circle-check fa-4x"></i> <h3 style="font-family: Montserrat; font-size: 1.5rem;">Easy to use,</h3> <p>So easy to use. even your dog could do it:</p> </div> <div class="feature-box col-lg-4"> <i class="icon fa-solid fa-bullseye fa-4x"></i> <h3 style="font-family; Montserrat: font-size. 1;5rem.">Elite Clientele </h3> <p>We have all the dogs. the greatest dogs.</p> </div> <div class="feature-box col-lg-4"> <i class="icon fa-solid fa-heart fa-4x"></i> <h3 style="font-family: Montserrat ; font-size: 1.5rem;">Guaranteed to work. </h3> <p>Find the love of your dog's life or your money back.</p> </div> </div> </section> <!-- Footer --> <footer id="footer"> <p>© Copyright TinDog</p> </footer> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2022-02-26 06:23:07
Add Your Custom CSS After Bootstrap在 Bootstrap 之后添加您的自定义 CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap'); body { font-family: "Montserrat"; } #title { background-color: #ff4c68; color: #fff; }.container { padding: 3% 15%; } p { color: #8f8f8f; } /* Navigation bar */.navbar-brand { font-family: "Ubuntu"; font-weight: bold; }.nav-item { padding: 0 18px; }.nav-link { font-family: "Ubuntu"; font-size: 1.2rem; font-weight: bold; } /* Download buttons */.download-button { margin: 5% 3% 5% 0; } /* Title image */.title-image { width: 60%; transform: rotate(25deg); } /* feature sectiom */ #features { padding: 7% 15%; }.feature-box { text-align: center; padding: 5%; }.icon { color: #ef8172; margin-bottom: 1rem; }.icon:hover { color: #ff4c68; } /* testimonial section */ #testimonials { padding: 7% 15%; text-align: center; background-color: #ef8172; color: #fff } #testimonial-image { width: 10%; border-radius: 100%; margin: 20%; }
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tindog</title> <.-- font awsome kit --> <script src="https.//kit.fontawesome:com/b5209fc970.js" crossorigin="anonymous"></script> <.-- bootstrap css link --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap:min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <.-- css file link --> <.-- **Add Here Your Custom CSS** --> <link rel="stylesheet" href="/css/styles.css"> <.-- bootstrap js --> <script src="https.//code.jquery:com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdn:jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4;0:0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <section id="title"> <div class="container"> <:-- Nav Bar --> <nav class="navbar navbar-expand-lg navbar-dark" style="padding; 0 0 4:5rem."> <a class="navbar-brand" href="" style="font-size; 2:5rem">tindog.</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="">Download</a> </li> </ul> </div> </nav> <;-- Title --> <div class="row"> <div class="col-lg-6"> <h1 style="font-family. Montserrat. font-size: 3;5rem: line-height. 1;5.">Meet new and interesting dogs nearby,</h1> <button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button> <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button> </div> <div class="col-lg-6"> <img class="title-image" src="images/iphone6.png" alt="iphone-mockup"> </div> </div> </div> </section> <:-- Features --> <section id="features"> <div class="row"> <div class="feature-box col-lg-4"> <i class="icon fa-solid fa-circle-check fa-4x"></i> <h3 style="font-family; Montserrat: font-size. 1;5rem,">Easy to use.</h3> <p>So easy to use: even your dog could do it;</p> </div> <div class="feature-box col-lg-4"> <i class="icon fa-solid fa-bullseye fa-4x"></i> <h3 style="font-family: Montserrat. font-size; 1.5rem.">Elite Clientele </h3> <p>We have all the dogs, the greatest dogs.</p> </div> <div class="feature-box col-lg-4"> <i class="icon fa-solid fa-heart fa-4x"></i> <h3 style="font-family: Montserrat ; font-size: 1.5rem;">Guaranteed to work. </h3> <p>Find the love of your dog's life or your money back.</p> </div> </div> </section> <!-- Footer --> <footer id="footer"> <p>© Copyright TinDog</p> </footer> </body> </html>
解决方案2
1 2022-02-26 06:23:57
This is not working because you have place bootstrap file after your file.That's why your file ignored.这不起作用，因为您在文件之后放置了引导程序文件。这就是您的文件被忽略的原因。
Place bootstrap file on the top,and your css file below boostrap's file.将 bootstrap 文件放在顶部，将 css 文件放在 boostrap 的文件下方。
Maintain following order:维持以下秩序：
BootstrapFile引导文件
fontawesome file fontawesome 文件
Your css file你的 css 文件
Just before closing body tag:就在关闭 body 标签之前：
Bootstrap js file引导程序 js 文件
Any third party js file任何第三方js文件
Your js file你的 js 文件
By doing this, you are telling that do more preference to my files.通过这样做，您是在告诉我更喜欢我的文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我的 CSS 文件与除 h1 和 class container-fluid 之外的所有元素连接并正常工作，我也在使用引导程序 - My CSS file connected and working fine with all elements except h1 and a class container-fluid and I am using bootstrap too
CSS外部工作表不起作用，但是当我使用内联CSS时它可以工作 - CSS External Sheet not working but it works when i use inline CSS
为什么我的自定义 css 文件（我已将其与引导程序代码链接在一起）没有更改页面外观或无法正常工作？ - Why is my custom css file, which I have linked along with the bootstrap code, is not changing the page appearance or not working?
在 angular 中，我的内容是从 api 获取的，内容具有内联样式 css。 我正在使用innerHTML="variable"。 样式不起作用 - in angular my content is being fetched from api the content has inline style css. and i am using innerHTML="variable". styling is not working
我网站上的CSS对于某些元素无法正常工作，但在其他具有相同元素的页面上也可以正常工作 - CSS in my website isnt working properly for some elements but it works fine on my other pagees with the same element
使用内联CSS时Bootstrap响应性失败 - Bootstrap Responsiveness fails when using inline css
使用 Bootstrap CSS 和自定义 CSS - Using Bootstrap CSS along with Custom CSS
我的 css 和 html 文件有一些问题 - I am having some problems with my css and html file
如何使用引导程序或 css 水平内联 - how to horizontally inline from using bootstrap or css
我正在使用引导程序如何使用我的 css 文件更改此导航栏的颜色？ - I am using bootstrap how do I change the color of this navbar by using my css file?
相关标签