无法使用外部CSS覆盖引导程序
[英]Unable to overwrite bootstrap with external css
问题描述
I recently started a coding bootcamp and we are learning about bootstrap. 
我最近开始了一个代码训练营，我们正在学习引导程序。 A lot of my friends prefer to stay away from bootstrap for other reasons, but we are learning it in class so no choice. 我的许多朋友都出于其他原因而倾向于不使用引导程序，但是我们在课堂上正在学习它，所以别无选择。 Anyway, I've tried many things. 无论如何，我已经尝试了很多东西。 I've tried adding a new class to the element I'm trying to style, I've tried to be specific like div > p .lead , and quite a few other ideas, all followed by the !important text. 我尝试在要设置样式的元素中添加新类，并尝试像div > p .lead这样具体，还有很多其他想法，所有后跟!important文本。 I am starting to think perhaps maybe my external stylesheet isn't being linked properly. 我开始认为也许我的外部样式表未正确链接。 I've quadruple checked the file locations and tried changing things to see if that would help, still no dice. 我已经四倍检查了文件位置，并尝试更改内容以查看是否有帮助，但仍然没有问题。 I've tried reaching out to some of my friends for help as well, but most of them are already at work and can't help me at the moment, so that brings me here! 我也尝试向一些朋友寻求帮助，但是他们中的大多数人已经在工作，目前无法帮助我，所以把我带到了这里！
My HTML and CSS code. 我的HTML和CSS代码。 I know the CSS is pretty plain, this is just for testing purposes, trying to find out how to overwrite the html. 我知道CSS很简单，这只是出于测试目的，试图找出如何覆盖html。 I greatly appreciate your time for looking at this. 非常感谢您抽出宝贵的时间来查看此内容。
On a side note, a lot of my classmates make fun of how I space out my coding. 附带一提，我的很多同学都在嘲笑我如何间隔编码。 If you guys think this is an issue, speak up! 如果你们认为这是一个问题，请大声说出来！ I want to know so I don't get locked into one way of doing things, and have time to adjust my muscle memory before it sets in and becomes tough to change! 我想知道，这样我就不会陷入一种做事方式，而是有时间去调整我的肌肉记忆，以免它变得难以改变！ Thank you 谢谢
.jumbotron h1 { background-image: url(/img/pizza.png) !important; } title { font-family: cursive !important; }
<!DOCTYPE html> <html lang="en" > <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" > <link rel="stylesheet" type="text/css" href="/css/custom.css" > <meta charset="UTF-8" > <meta name="viewport" content="width=, initial-scale=1.0" > <meta http-equiv="X-UA-Compatible" content="ie=edge" > <title> Pizza World </title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light" > <a class="navbar-brand" href="#" > Pizza World </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 mr-auto" > <li class="nav-item active" > <a class="nav-link" href="#" > Order Online <span class="sr-only" > (current) </span> </a> </li> <li class="nav-item" > <a class="nav-link" href="#" > Menu </a> </li> <form class="form-inline my-2 my-lg-0" > <input class="form-control mr-sm-2" type="search" placeholder="Zip Code" aria-label="Zip Code" > <button class="btn btn-outline-success my-2 my-sm-0" type="submit" > Search stores near you! </button> </form> </div> </nav> <div class="jumbotron" > <h1 class="display-12 myh1class" > Hello, world! </h1> <p class="lead" > This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. </p> <hr class="my-4" > <p> It uses utility classes for typography and spacing to space content out within the larger container. </p> <p class="lead" > <a class="btn btn-primary btn-lg" href="#" role="button" > Learn more </a> </p> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" i ntegrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" > </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" > </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" > </script> </body> </html>
2 个解决方案
解决方案1
0 2018-11-13 18:10:23
It is possible to override the Bootstrap CSS in a number of ways. 可以通过多种方式覆盖Bootstrap CSS。
You can use !important, as you have here, although it is not really the best way as it can cause unintended behavior later on.
您可以像这里一样使用！important，尽管它并不是最好的方法，因为它稍后可能导致意外行为。 You download the Bootstrap JS and CSS files and modify as needed (as opposed to using a CDN link in your headers) and include it in your project files.
您下载Bootstrap JS和CSS文件并根据需要进行修改（而不是在标题中使用CDN链接）并将其包含在项目文件中。 You can use a CSS selector such as id="bootstrap-override" in your HTML.
您可以在HTML中使用CSS选择器，例如id =“ bootstrap-override”。 Bootstrap mostly uses classes which carry a weight 1/10th of that of an ID. Bootstrap通常使用承载ID重量1/10的类。 Here is a good article that explains CSS Specificity 这是一篇很好的文章，解释了CSS特异性
解决方案2
0 2018-11-13 22:26:31
The CSS is at external link and its first reading it, easiest way is to upload Bootstrap CSS to your work files and link it in html, after that just edit it as you want. CSS是外部链接，它是第一个阅读它的方法，最简单的方法是将Bootstrap CSS上传到您的工作文件并以html链接，然后根据需要对其进行编辑。 Pretty easy. 相当容易。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.