Bootstrap и мой CSS столкнулись

Я делаю свой проект по веб-разработке, и моему другу было поручено сделать панель навигации. Но после того, как я завершил свой веб-сайт и вставил его навигационные штрих-коды в свои коды. Он конфликтовал с моей загрузкой и, следовательно, не отображался правильно. Я пробовал искать решения, такие как вставка ссылки ref после начальной загрузки, но все равно безрезультатно.

Я помещу сюда 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;
}

измените класс навигационной панели в файлах HTML и CSS. Сделайте их уникальными, тогда они не будут конфликтовать просто так

— 30.07.2018 07:38

Проблема в именах ваших классов. Будьте более конкретными, когда вы называете класс.

— 30.07.2018 08:12

@JayantSingh, я сделал именно это, но это не сработало. Хотя некоторые функции только работали.

— 30.07.2018 08:43

Пожалуйста, прочтите При каких обстоятельствах я могу добавить к своему вопросу «срочно» или другие похожие фразы, чтобы получить более быстрые ответы? - вкратце, это не идеальный способ обращения к волонтерам и, вероятно, контрпродуктивно для получения ответов. Пожалуйста, воздержитесь от добавления этого к своим вопросам.

— 30.07.2018 20:00

html css twitter-bootstrap

30.07.2018 07:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

122

Ответы 3

Просто переименуйте свой класс с любым уникальным именем, которого не будет в 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;
}

Спасибо за помощь, братан. Но когда я помещаю ссылку начальной загрузки - <link rel = "stylesheet" href = "maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.‌ min.css" integration = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg‌ 4Va + PmSTsz / K68vbdEjh‌ 4u" crossorigin>. Он не работает нормально, как текстовое оформление <li>. @Jayant Singh

— 30.07.2018 08:59

30.07.2018 07:45

Измените имя ваших определенных классов, например, класс .navbar в вашем файле css уже включен в файл css начальной загрузки.

30.07.2018 08:18

Если вы хотите использовать некоторый css начальной загрузки и некоторый пользовательский css, просто напишите новый класс рядом с классом 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>

Прости, братан, но это не помогло. Вы должны попробовать запустить коды, ха-ха

— 30.07.2018 09:03

почему-то мой фрагмент не работает, но решение правильное, вам нужно только добавить класс рядом с навигационной панелью и просто настроить таргетинг на все css с вашим классом и navbarclass

— 30.07.2018 09:08

30.07.2018 08:37