Положение моей навигационной панели изменяется при загрузке в домен - PullRequest
Новая
       5

Положение моей навигационной панели изменяется при загрузке в домен

0 голосов
/ 30 августа 2018

Вот код, который у меня есть для панели навигации:

HTML: 

<ul class="nav">
    <a href="archive.html" class="currentblue" class="stop" style="text-decoration: none">ARCHIVE</a>
    <a href="home.html" class="item" class="stop" style="text-decoration: none">HOME</a>
    <a href="contact.html" class="item" class="stop" style="text-decoration: none">CONTACT</a>
</ul>

CSS: 

/* NAV BAR */

.nav{
    text-decoration: none;
    list-style: none;
    margin: 150px;
    text-align: center;
}

.nav li{
    display: inline;
}

.nav a{
    display: inline-block;
}

.currentred{
    background-color: blue;
    color: white;
    text-decoration: none;
    font-size: 3.0vw;
    padding: 0px 50px 0px 50px;
    font-family: Impact;
}

.currentred:hover{
    color: white;
}

.currentblue{
    background-color: red;
    color: white;
    text-decoration: none;
    font-size: 3.0vw;
    padding: 0px 50px 0px 50px;
    font-family: Impact;
}

.currentblue:hover{
    color: white;
}

.item{
    color: white;
    text-decoration: none;
    font-size: 3.0vw;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
    font-family: Impact;
}

.item:hover{
    color: white;
}
/* END NAV BAR */

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

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

Есть идеи, почему это происходит?

https://imgur.com/a/AQOSOUg

Спасибо

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Бутстрап является виновником здесь. Поскольку вы используете загрузчик CSS, он автоматически присваивает некоторые стили вашему классу навигации .nav. В этом случае ему присваивается свойство display: flex, вызывающее вашу проблему. Вы можете отменить это и ввести display: block; o я бы порекомендовал использовать другое имя класса, отличное от .nav, если вы хотите стилизовать собственную область навигации.

0 голосов
/ 30 августа 2018

При условии, что вы хотите, чтобы навигационная панель была отцентрирована по горизонтали, вам нужно обновить поле для класса nav до: 

.nav {
    /* other styles */
    margin: 150px auto;
}

Использование одного значения margin: 150px устанавливает для левого и правого поля значение 150px, что, по-моему, приводит к проблемам с рендерингом. Значение auto для левого / правого поля будет центрировано по горизонтали.

...