Question

当导航栏的高度未知时，是否可以将折叠按钮居中？我可以这样做：

.navbar-toggler {
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: 40; /*something appropriate*/
}

现在按钮垂直对齐。但是，当我打开菜单（点击它）时，它也将以文本为中心，这是我不想要的。在这里玩吧：

https://codepen.io/anon/pen/ZKbJJV

我还想让徽标在＆＃34;移动视图＆＃34;中浮动。这可能不使用媒体查询吗？

Answer 1

我通过将按钮和品牌包装在这样的div中来实现它：

<div class="d-flex align-items-center justify-content-between">
  <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand ml-3" href="/en">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo" alt="logo">
  </a>
</div>

然后我也在按钮上做了一些CSS：

.navbar-toggler {
  align-self: inherit;
  position: initial;
}

这就是它。解决了这两个问题！

垂直对齐Bootstrap 4导航栏折叠按钮

1 个答案: