Bootstrap和我的CSS发生冲突

Question

我正在做网站开发项目，我的朋友被分配去做导航栏。但是，当我完成我的网站并将他的导航条形码粘贴到我的代码中之后。它与我的引导程序发生冲突，因此无法正确显示。我尝试搜索解决方案，例如在引导程序之后粘贴链接引用，但仍然无济于事。

我将在此处放置CSS代码和HTML代码。我猜是班级冲突了？

<nav class="navbar">
    <ul>
      <li><a class="donation" border= href="#donate">DONATE</a></li>
      <li class="dropdown">
        <a href="#events" id="maintopic" class="dropbtn">EVENTS</a>
        <div id="specificdays" class="dropdown-content">
            <a href="#">World Environment Day</a>
            <a href="#">World Ocean Day</a>
            <a href="#">World Clean Up Day</a>
            <a href="#">World Day to combat Desertification and Drought </a>
        </div>
     </li>
      <li class="dropdown">
        <a href="javascript:void(0)" id="maintopic" class="dropbtn">PROJECTS</a>
        <div class="dropdown-content">
            <a href="#">Reward System</a>
            <a href="#">Comic Strips &amp; Posters</a>
            <a href="#">Make A Pledge</a>
            <a href="#">Why a Greenboy</a>
            <a href="#">Donate to a cause</a>
        </div>
      </li>
      <li><a id="maintopic" href="#about">ABOUT</a></li>
      <li id="logo"><a href="#home"><img src="eugene.png" class="logo"></a></li>
    </ul>
</nav>

/ CSS /

*{
    margin-top:0;
    margin-left:0;
    margin-right:0;
}
#mainpage{
    width:100%;
    height:650px;
}
#logo{
    float:left;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
nav{
    position:sticky;
    top:0;
    z-index:1;
}
li {
    float: right;
    text-align:center;
    padding-right:40px;
    padding-top:10px;
    display:block;
}

li a, .dropbtn {
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family:quicksand;
    margin-top:5px;
    margin-right:-10px;
}
#maintopic{
    letter-spacing: 4px;
    font-size:13px;
}
.donation{
    border:1;
    border-size:1px;
    letter-spacing: 4px;
    font-size:13px;
    border-color:#333;
    border-style:solid;
    cursor:pointer;
    border-color:white;
    padding:10px 10px 10px 10px;
}
.donation:hover{
    background-color:#fff;
    color:#333;
}
#maintopic:hover{
    border-bottom:2px solid #fff;
}

li .dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display:block;
    text-align: left;
    width:128px;
}
#specificdays a{
    width:200px;
}
#specificdays a:hover{
    width:190px;
}

.dropdown-content a:hover {
    background-color: #333;
    color:#ddd ;
}

.dropdown:hover .dropdown-content {
    display:block;
}
.navbar{
    padding:3px;
    text-align:center;
    color: black;
    font-family: sans-serif;
    background-color: #333;
}
.logo{
    width:140px;
    height:60px;
    cursor: pointer;
    margin-top:-25px;
    margin-bottom:-10px;
}

Answer 1

只需使用不会在Bootstrap中出现的唯一名称来重命名您的班级。为此，您可以使用班级或其他名称添加网站名称

<nav class="your-theme-navbar">
<ul>
  <li><a class="donation" border= href="#donate">DONATE</a></li>
  <li class="your-theme-dropdown">
    <a href="#events" id="maintopic" class="dropbtn">EVENTS</a>
    <div id="specificdays" class="your-theme-dropdown-content">
        <a href="#">World Environment Day</a>
        <a href="#">World Ocean Day</a>
        <a href="#">World Clean Up Day</a>
        <a href="#">World Day to combat Desertification and Drought </a>
    </div>
 </li>
  <li class="your-theme-dropdown">
    <a href="javascript:void(0)" id="maintopic" class="dropbtn">PROJECTS</a>
    <div class="your-theme-dropdown-content">
        <a href="#">Reward System</a>
        <a href="#">Comic Strips &amp; Posters</a>
        <a href="#">Make A Pledge</a>
        <a href="#">Why a Greenboy</a>
        <a href="#">Donate to a cause</a>
    </div>
  </li>
  <li><a id="maintopic" href="#about">ABOUT</a></li>
  <li id="logo"><a href="#home"><img src="eugene.png" class="your-theme-logo"></a></li>
</ul>

并在CSS中也更改这些类

*{
    margin-top:0;
    margin-left:0;
    margin-right:0;
}
#mainpage{
    width:100%;
    height:650px;
}
#logo{
    float:left;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
nav{
    position:sticky;
    top:0;
    z-index:1;
}
li {
    float: right;
    text-align:center;
    padding-right:40px;
    padding-top:10px;
    display:block;
}

li a, .dropbtn {
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family:quicksand;
    margin-top:5px;
    margin-right:-10px;
}
#maintopic{
    letter-spacing: 4px;
    font-size:13px;
}
.donation{
    border:1;
    border-size:1px;
    letter-spacing: 4px;
    font-size:13px;
    border-color:#333;
    border-style:solid;
    cursor:pointer;
    border-color:white;
    padding:10px 10px 10px 10px;
}
.donation:hover{
    background-color:#fff;
    color:#333;
}
#maintopic:hover{
    border-bottom:2px solid #fff;
}

li .your-theme-dropdown {
    display: inline-block;
}

.your-theme-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.your-theme-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display:block;
    text-align: left;
    width:128px;
}
#specificdays a{
    width:200px;
}
#specificdays a:hover{
    width:190px;
}

.your-theme-dropdown-content a:hover {
    background-color: #333;
    color:#ddd ;
}

.your-theme-dropdown:hover .your-theme-dropdown-content {
    display:block;
}
.your-theme-navbar{
    padding:3px;
    text-align:center;
    color: black;
    font-family: sans-serif;
    background-color: #333;
}
.your-theme-logo{
    width:140px;
    height:60px;
    cursor: pointer;
    margin-top:-25px;
    margin-bottom:-10px;
}

Answer 2

更改已定义类的名称，例如，css文件中的.navbar类已包含在bootstrap的css文件中。

Answer 3

如果您要使用一些引导程序CSS和一些自定义CSS，则只需在navbar类附近编写新类，并使用该新类定位所有navbar css 例子

*{
    margin-top:0;
    margin-left:0;
    margin-right:0;
}
#mainpage{
    width:100%;
    height:650px;
}
#logo{
    float:left;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
nav.custom-navbar{
    position:sticky;
    top:0;
    z-index:1;
}
.custom-navbar ul li {
    float: right;
    text-align:center;
    padding-right:40px;
    padding-top:10px;
    display:block;
}

.custom-navbar ul li a,.custom-navbar ul li a.dropbtn {
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family:quicksand;
    margin-top:5px;
    margin-right:-10px;
}
#maintopic{
    letter-spacing: 4px;
    font-size:13px;
}
.donation{
    border:1;
    border-size:1px;
    letter-spacing: 4px;
    font-size:13px;
    border-color:#333;
    border-style:solid;
    cursor:pointer;
    border-color:white;
    padding:10px 10px 10px 10px;
}
.donation:hover{
    background-color:#fff;
    color:#333;
}
#maintopic:hover{
    border-bottom:2px solid #fff;
}

.custom-navbar ul li .dropdown {
    display: inline-block;
}

.custom-navbar ul li .dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.custom-navbar ul li .dropdown .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display:block;
    text-align: left;
    width:128px;
}
#specificdays a{
    width:200px;
}
#specificdays a:hover{
    width:190px;
}

.custom-navbar ul li .dropdown .dropdown-content a:hover {
    background-color: #333;
    color:#ddd ;
}

.custom-navbar ul li .dropdown:hover .dropdown-content {
    display:block;
}
.custom-navbar.navbar{
    padding:3px;
    text-align:center;
    color: black;
    font-family: sans-serif;
    background-color: #333;
}
.logo{
    width:140px;
    height:60px;
    cursor: pointer;
    margin-top:-25px;
    margin-bottom:-10px;
}

<nav class="navbar custom-navbar">
    <ul>
      <li><a class="donation" border= href="#donate">DONATE</a></li>
      <li class="dropdown">
        <a href="#events" id="maintopic" class="dropbtn">EVENTS</a>
        <div id="specificdays" class="dropdown-content">
            <a href="#">World Environment Day</a>
            <a href="#">World Ocean Day</a>
            <a href="#">World Clean Up Day</a>
            <a href="#">World Day to combat Desertification and Drought </a>
        </div>
     </li>
      <li class="dropdown">
        <a href="javascript:void(0)" id="maintopic" class="dropbtn">PROJECTS</a>
        <div class="dropdown-content">
            <a href="#">Reward System</a>
            <a href="#">Comic Strips &amp; Posters</a>
            <a href="#">Make A Pledge</a>
            <a href="#">Why a Greenboy</a>
            <a href="#">Donate to a cause</a>
        </div>
      </li>
      <li><a id="maintopic" href="#about">ABOUT</a></li>
      <li id="logo"><a href="#home"><img src="eugene.png" class="logo"></a></li>
    </ul>
</nav>