【发布时间】：2017-05-26 22:54:24
【问题描述】：
，我正在尝试在最新版本的 bootstrap 4 中使用 flexbox 选项...我想在我的导航元素上设置一些空格...这个，使用 bootstrap 制作的 flexbox 类...这里是引导文档上显示的导航栏示例我刚刚将我需要的类添加到导航元素的末尾，但没有任何反应......品牌元素和列表根本没有移动......请帮助！
https://v4-alpha.getbootstrap.com/utilities/flexbox/
<nav class="navbar navbar-toggleable-md navbar-light d-flex justify-content-end flex-row ">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand align-self-start" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portada
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Nosotros</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nosotros</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Soluciones
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Nosotros</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Clientes</a>
</li>
</ul>
</div>
</nav>
【问题讨论】：
-
到底是什么问题？如果您也提供一个工作演示，这将有所帮助。我在这里为你做了一个。对我来说似乎还可以。 codepen.io/anon/pen/bgpwLM
-
@MichaelCoker 看看 justify-content-end 类...它应该移动导航栏空间末尾的所有元素...如果我设置 justify-content-center-- -它应该使它们居中
-
您是否试图将导航中的所有内容都向右对齐？如果是这样，您可以使用
#navbarNav { width:auto; }，justify-content: flex-end;规则会将内容对齐到导航的末尾。 -
@MichaelCoker 我确定这可能是解决方案....但我正在使用为 flexbox 设计的引导类...看看这个v4-alpha.getbootstrap.com/utilities/flexbox
-
问题在于
#navbarNav.navbar-collapse是nav.d-flex.navbar-toggleable-md的直接后代，而.navbar-toggleable-md .navbar-collapse在引导CSS 中有width: 100%;。这意味着#navbarNav占用了nav下的所有可用空间，这意味着没有任何可用空间可以移动任何东西，因为#navbarNav将所有东西都向右对齐。如果您在#navbarNav 上禁用width: 100%，那么它和其他 flex 子项可以按照您的意愿右对齐。
标签： css frameworks alignment flexbox navbar