垂直对齐引导程序4 Navbar Collapse按钮

Question

当Navbar的高度未知时，是否可以将倒塌按钮中心？我可以做类似的事情：

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

现在，该按钮已垂直对齐。但是，当我打开菜单(单击(时，它也将集中在文本上，这是我不想要的。在这里玩耍：

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

我还想在"移动视图"中使徽标浮动。如果不使用媒体查询，这是可能的吗？

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>

然后我在按钮上也进行了一些CS：

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

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