Question

当我在小屏幕上点击bootstrap navbar-toggle按钮时，当navbar-collapse打开时它向左移动一点，当它关闭时返回到中心。

<nav class="navbar navbar-expand-sm navbar-light bg-default" data-toggle="affix">
    <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
        <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#toggle-items" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse text-center" id="toggle-items">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">O Projeto</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Sobre Mim</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contato</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS

.nav-link {
  font-family: "Cabo Slab-Regular";
  font-size: large;
  letter-spacing: 2px;
  color: white !important;
  padding: 10px;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.nav-link:hover {
  color: #e1e1e1 !important;
}


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
  .nav-link {
    font-size: inherit;
    padding: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  } 
}

Answer 1

.mx-auto.d-sm-flex.d-block.flex-sm-nowrap {
    text-align: center;
}

当菜单打开时，它应该居中对齐其父级中的.navbar-toggle按钮，以防止在切换时出现不希望的左右跳跃效果。它对我来说几乎不知不觉地跳了起来，但这是一个微小的动作，可以通过一些额外的试错法调整来纠正。

Answer 2

.navbar-toggler { marging: 0 auto; }

单击时，引导导航栏切换按钮向左移动

2 个答案: