Question

所以我得到了这个脚本：

<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与主徽标不对齐

explenation photo of the result

Answer 1

我认为代码段中没有问题，但是如果您遇到此问题，则可以添加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>

第一个导航栏对齐问题

1 个答案: