проблема с выравниванием навбара первого - PullRequest
Новая
       4

проблема с выравниванием навбара первого

1 голос
/ 13 апреля 2020

Итак, я получаю этот скрипт: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar bg-light navbar-expand-sm justify-content-center">
    <a class="navbar-brand" href="/test2">
        <img src="css/favimg/logo.png" height="40" alt="test">
    </a>
    <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</nav>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Проблема в том, что у меня возникает следующая проблема: первая link2 не выровнена с основной lo go

фото расширения результата

1 Ответ

0 голосов
/ 13 апреля 2020

Я не вижу проблем во фрагменте, но если вы столкнулись с этой проблемой, вы можете добавить align-items-center класс, чтобы решить эту проблему. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar bg-light navbar-expand-sm justify-content-center">
    <a class="navbar-brand" href="/test2">
        <img src="css/favimg/logo.png" height="40" alt="test">
    </a>
    <ul class="navbar-nav align-items-center">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</nav>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
...