垂直对齐引导程序4导航栏折叠按钮

当导航栏的高度未知时，是否可以将折叠按钮居中？我可以这样做：垂直对齐引导程序4导航栏折叠按钮

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

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

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

我也想使标志浮动权当它在“移动视图”。也许没有使用媒体查询可能吗？

来源

2017-04-18 MortenMoulder

不会以这种方式..你必须将折叠按钮和品牌标志包裹在一个div中才能获得fx高度。当我们在移动情况下打开菜单时，nav的高度变得可变。 –

@SahilDhir即使我将它们包装在一个div中，并执行'class =“d-flex align-items-center”'，它将不起作用，因为按钮位于绝对位置。 – MortenMoulder

你可以使用它创建一支笔吗？ –

我把它通过包装按钮和品牌在这样一个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; 
}

而且这几乎是它。解决了这两个问题！

来源

2017-04-18 10:25:35 MortenMoulder

垂直对齐引导程序4导航栏折叠按钮

回答

相关问题