Bootstrap 4导航栏即使在切换时也保持右侧 [英] Bootstrap 4 Navbar keep section on right even when toggled
本文介绍了Bootstrap 4导航栏即使在切换时也保持右侧的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
即使扩展了拨动开关,我也尝试使登录部分"保持在右角.我已经尝试过浮动该部分,但是没有用.
I try to make the "login section" stay on the right corner even when the toggle is expanded. I have try to float the section but it did not work.
这是我的代码:
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#mymenu">
<span class="sr-only">toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">App</a>
</div>
<div class="collapse navbar-collapse" id="mymenu">
<!-- nav body -->
<ul class="nav navbar-nav mr-auto">
<li class="active nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
data-toggle="dropdown" role="button"
href="#">Item 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Item 3.1</a></li>
<li><a class="dropdown-item" href="#">Item 3.2</a></li>
<li><a class="dropdown-item" href="#">Item 3.3</a></li>
</ul>
</li>
</ul>
<!-------------------Search---------------------->
<form class="form-inline my-2 my-lg-0 position-relative">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<!--------------------User---------------------->
<div class="ml-lg-5">
<a class="navbar-brand" href="#">Log In</a>
</div>
</div>
</nav>
感谢您考虑我的要求.
推荐答案
您可以使用flexbox navbar-collapse之前,然后使用order-lg-last order-0
将其放置在较大屏幕的最后(第3个),然后在切换移动导航栏时在较小屏幕的自然顺序(第2个).
You can use the flexbox ordering classes to adjust the position of the "Log In" div. For example place it before the navbar-collapse
in the markup, and then use order-lg-last order-0
to position it last (3rd) on larger screens, then natural order (2nd) in smaller screens when the mobile navbar is toggled.
https://www.codeply.com/go/7Mz5XkMckc
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mymenu">
<span class="sr-only">toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">App</a>
</div>
<div class="ml-lg-5 order-lg-last order-0">
<a class="navbar-brand" href="#">Log In</a>
</div>
<div class="collapse navbar-collapse" id="mymenu">
<ul class="nav navbar-nav mr-auto">
<li class="active nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" href="#">Item 3
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Item 3.1</a></li>
<li><a class="dropdown-item" href="#">Item 3.2</a></li>
<li><a class="dropdown-item" href="#">Item 3.3</a></li>
</ul>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 position-relative">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
这篇关于Bootstrap 4导航栏即使在切换时也保持右侧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文