自举4（阿尔法6）品牌GET的居中并toggler

当Bootrap 4使用导航栏和容器（阿尔法6）等自举4（阿尔法6）品牌GET的居中并toggler

<nav class="navbar navbar-static-top navbar-toggleable-md navbar-light bg-faded"> 

<div class="container"> 

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-toggler-div" aria-controls="navbar-toggler-div" aria-expanded="false" aria-label="Navigation"> 
     <i class="fa fa-bars"></i> 
    </button> 

    <a class="navbar-brand" href="/"> 
     Band name here 
    </a> 

    <div class="collapse navbar-collapse" id="navbar-toggler-div"> 

     <ul class="navbar-nav"> 

      <li class="nav-item"> 
       <a class="nav-link" href="#">Foo</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link" href="#">Bar</a> 
      </li> 

     </ul> 

    </div> 

</div>

并且当屏幕是非常小的重叠（类似手机）的品牌标志/文（无所谓）和toggler *获取中心 *做重叠（toggler不是旁边的品牌，但“开”的话）

这也适用于其他的导航栏类型（固定-top，默认）。

在导航元素后移除“容器”时，一切都很好。

我需要容器div有一个全宽的导航栏，但它本身“居中”（如下面的内容）。

来源

2017-01-25 Schubi Duah

你可以创建一个你的问题工作小提琴吗？我在这里创建了一个bs4a6 nav模板：https://jsfiddle.net/80ktkq37/ – Escher

https://jsfiddle.net/p47Lqb9f/ –

答案适合你吗？如果是这样，不要忘记点击接受按钮。 – Escher

您的<nav>菜单中有一个额外的<div class="container"> flexbox容器，该容器不应该存在，因此引导程序会尝试自动将所有项目对齐到中心。删除那div，它的工作原理。

，这里是你拨弄<div class="container">删除更新： https://jsfiddle.net/p47Lqb9f/1/

来源

2017-01-25 13:19:49 Escher

准确地说这个容器是需要的，看到我原来的帖子：”我需要容器div有一个全宽的导航栏，但它本身“居中”（如下面的内容）。“ –

我可以通过添加以下CSS的容器

@media (max-width: 576px) { 
    nav .container { 
     width: 100%; 
    } 
}

@Escher“解决”这个参数：.container后的资产净值也在BS 4的官方CSS中，以及在他们的文档中。所以我相信它是有意的。

来源

2017-01-26 07:27:55

这工作得很好......谢谢！ – JohnnyDevv

自举4（阿尔法6）品牌GET的居中并toggler

回答

相关问题