我的引导程序目前正在覆盖我的自定义 CSS

Question

My app requires Bootstrap.我的应用需要 Bootstrap。 However, it is overriding my custom CSS then the navbar that I have set is now displayed in a weird manner.但是，它覆盖了我的自定义 CSS 然后我设置的导航栏现在以一种奇怪的方式显示。 What am I doing wrong and what can do to fix it?我做错了什么，可以做些什么来解决它？ My end goal is to let the bootstrap work along side with the css.我的最终目标是让引导程序与 css 一起工作。

Here is the image for more clarification:这是更多说明的图像：

The HTML code: HTML 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Client Server Application Project</title>
    <link rel="stylesheet" href="faq.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    />
    <!--BootStrap CSS-->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
    crossorigin="anonymous"
  ></script>
  </head>
  <body>
    <nav>
      <div class="logo">Revolutionary Fitness</div>
      <ul>
        <div class="items">
          <li><a href="#">Home</a></li>
          <li>
            <a href="service.html">Our Services</a>
            <ul>
              <li><a href="training.html">Gyms Training</a></li>
              <li><a href="#">Gym Location</a></li>
            </ul>
          </li>
          <li>
            <a href="login.php">Login</a>
          </li>
        </div>
        <li class="search-icon">
          <input type="search" placeholder="Search">
          <label class="icon">
            <span class="fas fa-search"></span>
          </label>
        </li>
      </ul>
    </nav>
    <div class="container">
      <div class="header">
        <h1>Frequently Asked Questions</h1>
      </div>
      <br><br>
      <div class="accordion" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Accordion Item #1
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Accordion Item #2
            </button>
          </h2>
          <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Accordion Item #3
            </button>
          </h2>
          <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div class="social">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-whatsapp"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
      </div>

      <ul class="list">
        <li>
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
        <li>
          <a href="faq.html">FAQs</a>
        </li>
      </ul>
      <p class="copyright">
        <small>&copy;2022 Singapore Polytehnic</small>
      </p>
    </footer>

  
    
    <!--BootStrap JavaScript-->
  </body>
</html>

The CSS code: CSS 代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav{
    background: #1b1b1b;
}
nav:after{
    content: '';
    clear: both;
    display: table;
}
nav .logo{
    float: left;
    color: white;
    font-size: 27px;
    font-weight: bold;
    line-height: 70px;
    padding-left: 60px;
}
nav ul{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    float: right;
    margin-right: 40px;
}
nav ul li{
    display: inline-block;
    background: #1b1b1b;
    margin: 0 5px;
}
nav ul li a{
    color: white;
    text-decoration: none;
    line-height: 70px;
    font-size: 18px;
    padding: 8px 15px;
}
nav ul li a:hover{
    color: cyan;
    border-radius: 5px;
    box-shadow: 0 0 5px #33ffff,
                0 0 5px #66ffff;
}
nav ul ul li a:hover{
    color: cyan;
    box-shadow: none;
}
nav ul ul{
    position: absolute;
    top: 90px;
    opacity: 0;
    visibility: hidden;
    transition: top .3s;
}
nav ul li:hover > ul{
    top: 70px;
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
}
nav ul ul li{
    position: relative;
    margin: 0px;
    width: 150px;
    float: none;
    display: list-item;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
nav ul ul li a{
    line-height: 50px;
}
nav ul .search-icon{
    height: 40px;
    width: 240px;
    display: flex;
    background: #f2f2f2;
    border-radius: 5px;
}
nav ul .search-icon input{
    height: 100%;
    width: 200px;
    border: none;
    outline: none;
    padding: 0 10px;
    color: #000;
    font-size: 16px;
    border-radius: 5px 0 0 5px;
}
nav ul .search-icon .icon{
    height: 100%;
    width: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #cccccc;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}
nav ul .search-icon .icon:hover{
    background: #e6e6e6;
}
nav ul .search-icon .icon span{
    color: #222222;
    font-size: 18px;
}
@media screen and (max-width:968px){
    nav .logo{
        display: none;
    }
    nav ul div.items{
        flex: 3;
    }
    nav ul .search-icon{
        display: none;
    }
}
.header{
    width: 100%;
    height: 100px;
    margin-top: 100px;
    background-color: crimson;
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.container{
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 700px;
}
.footer{
    padding: 40px;
    background-color: chartreuse;
}
.footer .social{
    text-align: center;
    padding-bottom: 25px;
    color:#4b4c4d;
}
.footer .social a{
    display: inline-block;
    height: 40px;
    width: 40px;
    background:rgb(0, 0, 0);
    margin: 0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color:#ffffff;
    transition: all 0.5s ease;
}
.footer .social a:hover{
    color:#24262b;
    background-color: #ffffff;
}
.footer ul{
    margin-top: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
.footer ul li a{
    color:inherit;
    text-decoration: none;
    opacity: 0.8;
}
.footer ul li{
    display: inline-block;
    padding: 0 15px;
}
.footer ul li a:hover{
    opacity: 1;
}
.footer .copyright{
    margin-top: 15px;
    text-align: center;
    font-size: 20px;
    color:black;
}

Much help is appreciated!非常感谢您的帮助！

Answer 1

I think Your Bootstrap link is not working properly.我认为您的引导链接无法正常工作。

actually, Bootstrap purpose is reducing css No of line codes.实际上，引导程序的目的是减少 css 行代码的数量。

simply, You can follow my steps..很简单，你可以按照我的步骤..

Try to use this Link:尝试使用此链接：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Finally, you can search on bootstrap, what you want to use.最后，您可以在 bootstrap 上搜索您要使用的内容。

https://getbootstrap.com/docs/5.1/components/navbar/

If you want to use Navbar?如果你想使用导航栏？ simply copy and paste your project..只需复制并粘贴您的项目..

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

我的引导程序目前正在覆盖我的自定义 CSS

问题描述

1 个解决方案

解决方案1
0 2022-08-09 09:25:06

我的引导程序目前正在覆盖我的自定义 CSS

问题描述

1 个解决方案

解决方案1 0 2022-08-09 09:25:06

解决方案1
0 2022-08-09 09:25:06