Списки начальной загрузки со ссылками не совпадают со списками в панели навигации - PullRequest
Новая
       6

Списки начальной загрузки со ссылками не совпадают со списками в панели навигации

0 голосов
/ 03 сентября 2018

У меня есть файл base.html, который загружает Bootstrap из CDN, а затем у меня есть несколько пользовательских стилей CSS в base.css. Тем не менее, в панели навигации у меня есть странное вертикальное выравнивание, когда один тип элемента, .navbar-nav > li, находится вверху панели навигации по сравнению с .navbar-nav > li > a. Мой HTML-шаблон Django выглядит так: 

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
        <div class="navbar-brand">
            <a href="#"><img style="margin-top: -10px;" src={% static "classroom/images/vsb-logo.png" %}></a>
        </div>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li><a href={% url 'admin:index' %}>Admin</a></li>
        <li><a href={% url 'classroom:blocklist' %}>Classlist</a></li>
        <li><a href={% url 'classroom:random' %}>Randomize</a></li>
        <li>{{request.user.username}}</li>
        <li><a href={% url 'account_logout' %}>Log out</a></li>
    </ul>
  </div><!-- /.container-fluid -->
</nav>

У меня есть base.css, заменяющий загрузочный css. Однако я не могу найти атрибуты стиля, которые делают стиль <li>{{request.user.username}}</li> выше, чем ссылки с тегами привязки, такие как <li><a href={% url 'admin:index' %}>Admin</a></li>

Я дал следующие стили обоим селекторам и проверил в инструментах разработчика браузера, что они одинаковы для обоих: 

.navbar-default .navbar-nav li,
.navbar-default .navbar-nav li a {
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0px;
    position: relative;
    display: block;
    box-sizing: border-box;
}

Я могу взломать это и изменить строку имени пользователя на: 

<li><a href="#">{{request.user.username}}</a></li>

но я бы хотел выяснить, что является причиной этого смещения. Вот страница в реальном времени с проблемой

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Краткий ответ

Причина, по которой ваш текст "Doug W" появляется выше, чем его счетчики-братья и сестры (якорные ссылки), заключается в том, что вы добавляете значение padding-top:15px в base.css.

base.css в строке 20 

.navbar-default .navbar-nav li, 
.navbar-default .navbar-nav li a {
    padding-top: 15px;
    ...
}

Здесь, по сути, вы говорите, чтобы каждый из ваших элементов nav-bar li имел отступ в 15 пикселей, и если внутри них есть якорная ссылка, снова составьте это правило ... но на этот раз на якорные ссылки тоже.

Чувство "Дуг W" не имеет привязки к якорной ссылке, оно не следует обеим корректировкам верхней части отступа. На него влияет только padding-top:15px для .navbar-default .navbar-nav li, , а не для .navbar-default .navbar-nav li a. Вот почему «Дуг W» выделяется.

Длинный ответ

У вас есть 3 файла, управляющих коэффициентом заполнения для элементов панели навигации:

navbar.less в строке 266 - из CDN 

.navbar-nav>li>a {
    padding-top:10px
    ...
}

navs.less в строке 23 - из CDN 

.nav>li>a {
    ...
    padding:10px 15px;
}

base.css в строке 20 - Ваша пользовательская таблица стилей 

.navbar-default .navbar-nav li, .navbar-default .navbar-nav li a {
    padding-top: 15px;
    ...
}

На основании ссылки, которую вы предоставляете, похоже, что вы заинтересованы в том, чтобы Doug W был выше, чем ваши другие родственные ссылки. Попробуйте обернуть текст Doug W в элемент привязки, например ... 

<a href="#">Doug W</a>

или обернуть его в <p> элемент, например ... 

<p>Doug W</p>

Если вы решили обернуть его в элемент <p>, добавьте следующий набор правил CSS в таблицу стилей: 

.navbar-default .navbar-nav li p {
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0px;
    position: relative;
    display: block;
    box-sizing: border-box;
}

или просто сделай это ... 

.navbar-default .navbar-nav li,
.navbar-default .navbar-nav li a,
.navbar-default .navbar-nav li p {
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0px;
    position: relative;
    display: block;
    box-sizing: border-box;
}

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

0 голосов
/ 04 сентября 2018

Ваши проблемы смещения вызваны правилом .navbar-nav>li>a css. У него есть padding: 15px, который не применяется к вашему 4-му элементу, потому что это не тег привязки. Вы можете попробовать переместить это правило css, чтобы применить его ко всем элементам списка, например .navbar-nav>li

...