Блог

У меня проблемы с моей панелью навигации начальной загрузки. Я изменил его с navbar-fixed на navbar-static, и пустое пустое пространство создается так же, как я его изменил. Есть ли какие-либо идеи о том, как это исправить? Вот мой navbar.css

     .navbar-default {
    background-color: transparent;
    border-color: transparent;
    border-radius: 0px;
    padding: 15px 40px 10px 40px;
}

.navbar-brand img {
    height: 65px;
    width: 65px;
    margin-top: -20px;
    opacity: 0.5;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    transition: opacity .5s;
}

.navbar-brand img:hover {
    opacity: 1;
}

.navbar-default .navbar-nav>li>a {
    font-family: Raleway;
    font-size: 20px;
    color: #757575;
}

.navbar-default .navbar-nav>li>a {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a {
    background-color: transparent !IMPORTANT;
}

.navbar-default li.active a {
    border-bottom: 4px solid #202020;
    color: #202020 !IMPORTANT;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #202020 !IMPORTANT;
}
  

Наряду с html,
http://pastebin.com/21pW6ixt

Приведенные выше ответы могут быть старыми ответами для более ранних версий, но для Bootstrap 4, попробовав некоторые из вышеперечисленных, я понял, что мне просто нужно включить fixed-top в класс, чтобы удалить пустое пространство над панелью навигации.

 <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary ">
  

Без фиксированного верхнего пробела оно остается, даже если вы измените заполнение вручную

С фиксированным верхом панель навигации вверху, как и ожидалось….

Это есть в документации https://getbootstrap.com/docs/4.0/components/navbar/#placement и примечания «Исправленные навигационные панели используют position: fixed, что означает, что они извлекаются из обычного потока DOM и могут требовать пользовательского CSS (например, padding-top на )»

Как я вижу, у вас есть float right, примененный к классу navbar-right . Удалите правый элемент с плавающей точкой, и все элементы навигации по умолчанию снова будут плавающими влево.

Отредактируйте свой css, чтобы удалить объявление float right (я прокомментировал это, чтобы показать вам, что нужно удалить):

 .navbar-right {
    /* float: right !important; */
    margin-right: -15px;
}  

Я думаю, вам нужно изменить заполнение .navbar-default элемента, установив padding-top значение равным нулю (это увеличит элемент панели навигации):

 .navbar-default {
    background-color: transparent;
    border-color: transparent;
    border-radius: 0px;
    padding: 0px 40px 10px 40px;
}
  

и удалите margin-bottom из .navbar элемента (это удалит пустую зону под этими элементами):

 .navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 0;
    border: 1px solid transparent;
}
  

(основываясь на том, что я мог воспроизвести из ваших двух фрагментов)
До и после :