Javascript 如何在Bootstrap 4中调整仅端选择导航项?
我正在尝试仅将选择的导航项目浮动到右侧,并使用.justify content end 如果我将其添加到顶级div类中,这可以正常工作,但是如果我创建了一个特殊的div,并隔离了一个导航项,然后使用该类,则无法正常工作:Javascript 如何在Bootstrap 4中调整仅端选择导航项?,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在尝试仅将选择的导航项目浮动到右侧,并使用.justify content end 如果我将其添加到顶级div类中,这可以正常工作,但是如果我创建了一个特殊的div,并隔离了一个导航项,然后使用该类,则无法正常工作: <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<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" href="#">Bewander</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href='@Url.Action("Create", "Reviews")'>Write a Review </a>
</li>
<li class="nav-item">
<a class="nav-link" href='@Url.Action("Index", "Reviews")'>Search the World</a>
</li>
<div class="justify-content-end">
<li class="nav-item">
<a class="nav-link" href='@Url.Action("Login", "Account")'>Login</a>
</li>
</div>
</ul>
</div>
</nav>
-
-
-
虽然.justify content end以这种方式工作,但它会移动我不想要的所有项目,因此我尝试隔离特定的nav项目:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<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" href="#">Bewander</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href='@Url.Action("Create", "Reviews")'>Write a Review </a>
</li>
<li class="nav-item">
<a class="nav-link" href='@Url.Action("Index", "Reviews")'>Search the World</a>
</li>
<li class="nav-item">
<a class="nav-link" href='@Url.Action("Login", "Account")'>Login</a>
</li>
</ul>
</div>
</nav>
-
-
-
.justify content end
将.navbar nav
推到末尾,因为它是唯一的子项
相反,您可以尝试通过对flex grow:1
应用来强制.navbar nav
扩展到全宽。然后,应用左边距:auto代码>指向要向右推送的项目。幸运的是,bootstrap为后者提供了一个实用程序类–.ml auto
.justify content end
将.navbar nav
推到末尾,因为它是唯一的子项
相反,您可以尝试通过对flex grow:1
应用来强制.navbar nav
扩展到全宽。然后,应用左边距:auto代码>指向要向右推送的项目。幸运的是,bootstrap为后者提供了一个实用程序类–.ml auto