自定义 CSS 未申请 Bootstrap

Question

Bootstrap 的新手在这里。 我正在尝试在我的 Django 项目中创建一个简单的博客，似乎我的自定义 css 不能与引导程序一起使用。 通过在每一行上使用样式标签来覆盖它是乏味的。 我加载css和js的顺序是：

1. 引导 CSS
2. 我自己的 CSS
3. JQuery、Popper.js 和 Bootstrap.js

然后，在导航栏中 html 我注意到 href 不起作用，即使使用正确的链接：

<li class="dropdown-item" href="#"><a>See all</a></li>

所以，很自然地，我尝试将 href 放入 a 标签中，如下所示：

<li class="dropdown-item"><a class="nav-link" href="{% url 'blog_index'%}">See all </a></li>

这样，文本“查看全部”变为白色并且不再可见，因为背景也是白色的。 因此，作为一种解决方法，我将样式直接更改为此标签。 通过更改 css 文件中的导航链接 class 来更改它不会做任何事情。 还有我的 html 页面：

 .nav-link a{ color: black; }.navbar.dropdown-toggle, .navbar.dropdown-menu a{ cursor: pointer; }.navbar.dropdown-item.active, .navbar.dropdown-item:active { color: inherit; text-decoration: none; background-color: inherit; }.navbar.dropdown-item:focus, .navbar.dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } @media (min-width: 767px) {.navbar.dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } }.navbar-dark.navbar-nav.nav-link { color: red;important; }

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <,--Custom CSS--> <.-- JQuery, Popper:js. Bootstrap js scripts --> <script src="https.//code.jquery.com/jquery-3.5.1:min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation"> <a class="navbar-brand" href="#">Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="{% url 'index'%}">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">Github</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Projects</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" href="#"><a>See all</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categories</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item" href="#"><a>Action 1.1</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1.1.1</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Action 1:1;1</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Blog</a> <ul class="dropdown-menu" aria-labelledby="dropdown2"> <li class="dropdown-item" href="#"><a>Latest</a></li> <li class="dropdown-item" href="#"><a>Popular</a></li> <li class="dropdown-item"><a class="nav-link" href="{% url 'blog_index'%}" style="color: black; padding. 0cm." >See all </a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categories</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1"> <li class="dropdown-item" href="#"><a>Math</a></li> <li class="dropdown-item" href="#"><a>IT Security</a></li> <li class="dropdown-item" href="#"><a>Machine Learning</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1.1</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-1"> <li class="dropdown-item" href="#"><a>Action 2.1.1 A</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.1 B</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.1 C</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1.2</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-2"> <li class="dropdown-item" href="#"><a>Action 2.1.2 A</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.2 B</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.2 C</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Quizzes</a> <ul class="dropdown-menu" aria-labelledby="dropdown2"> <li class="dropdown-item" href="#"><a>See all</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categories</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1"> <li class="dropdown-item" href="#"><a>Action 2.1 A</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">History</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-1"> <li class="dropdown-item" href="#"><a>Action 2.1.1 A</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.1 B</a></li> <li class="dropdown-item" href="#"><a>Action 2.1.1 C</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flags</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-1"> <li class="dropdown-item" href="#"><a>Historical Flags</a></li> <li class="dropdown-item" href="#"><a>National Flags</a></li> <li class="dropdown-item" href="#"><a>German Federal Flags</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown2-1-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">IT</a> <ul class="dropdown-menu" aria-labelledby="dropdown2-1-2"> <li class="dropdown-item" href="#"><a>Ceasar's Cipher</a></li> <li class="dropdown-item" href="#"><a>Vigenere's Cipher</a></li> <li class="dropdown-item" href="#"><a>IT Security Basics</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> <main role="main" class="container"> <div class="jumbotron text-center"> <!-- Page Content --> {% block page_content %} {% endblock %} </div> </main>

我在这里想念什么？

Answer 1

通过我对您的代码的分析，它是正确的，不是指命令等，而是与 css (href) 的链接不正确。 我不知道你是如何组织代码的，所以我将使用“默认”来进行代码更正，但别担心，我也会教你代码背后的推理。

First, it is considered to create a css folder to store as.css code information and a.index file (for that html folder), and still within the standard it is necessary to create a folder to store the JQuery files (.js)和项目 fonts (.fonts) 的最后一个，但它们不是解决您的问题所必需的。

然后，要链接到这些其他文件夹，请使用“。” 到 go 后退 1 个目录，“..”到 go 后退两个目录，“...”到 go 后退三个目录等等。 进入一个目录用“/”和句号一样，即“//”进入两个目录，“///”返回三个，以此类推。

所以，不会从.index到.css做任何代码或链接，所以需要使用句点（.）返回目录，使用正斜杠（/）后进入css文件夹（所以我们已经有 "./nameFolderCss") 和最后，但并非最不重要的是我们必须访问.css 文件，我们再次使用正斜杠 (/) 所以我们有 (./nameFolderCss/fileName.css) 就是这样，现在链接正确完成，没有代码它看起来像这样：

link rel = "stylesheet" type = "text / css" href = "./nameFolderCss/fileName.css"