Bootstrap 4 导航栏右对齐
Bootstrap 4 Navbar align right
我正在使用来自 Bootstrap 4 网站的导航栏模板,但我在折叠导航项的位置方面遇到了问题。最初,切换按钮位于导航栏和列表项的左侧。
但我希望它们位于页面的右侧,所以我在按钮和导航项上插入了一个 float-xs-right class。然后,如果我单击切换按钮,则折叠项的位置不正确。正如您在屏幕截图中看到的那样。
Navbar screenshot
我希望折叠项位于下方和左侧。
顺便说一句,这是我的代码:
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-toggleable-md" id="main-navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More info</a>
</li>
</ul>
</div>
</nav>
此外,这是我的导航栏代码笔:
http://codepen.io/marcvs/pen/PGvqBO
提前谢谢你。
你好请看下面example.Though我用另一种方式做到了,但希望你正在寻找这个。
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Details</a></li>
<li><a href="#">Award</a></li>
<li><a href="#">More info</a></li>
</ul>
</div>
</nav>
参见 Fiddle NavBar Fiddle Demo
希望对您有所帮助。
对于 Bootstrap 4 阿尔法 6 / 贝塔:
这是正确的做法。您希望默认情况下向左浮动菜单。将按钮向右浮动 (float-xs-right
),但无法看到它 (hidden-lg-up
),然后 float-lg-right
ul
使其按您想要的方式工作。
查看此代码笔:
http://codepen.io/anon/pen/mAYAKd?editors=1100
它工作正常。
注意添加了 CSS:
@media screen and (max-width: 992px){
#main-navbar {
clear: both;
}
}
HTML:
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-toggleable-md" id="main-navbar">
<ul class="nav navbar-nav float-lg-right">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More info</a>
</li>
</ul>
</div>
</nav>
我正在使用来自 Bootstrap 4 网站的导航栏模板,但我在折叠导航项的位置方面遇到了问题。最初,切换按钮位于导航栏和列表项的左侧。
但我希望它们位于页面的右侧,所以我在按钮和导航项上插入了一个 float-xs-right class。然后,如果我单击切换按钮,则折叠项的位置不正确。正如您在屏幕截图中看到的那样。
Navbar screenshot
我希望折叠项位于下方和左侧。
顺便说一句,这是我的代码:
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-toggleable-md" id="main-navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More info</a>
</li>
</ul>
</div>
</nav>
此外,这是我的导航栏代码笔:
http://codepen.io/marcvs/pen/PGvqBO
提前谢谢你。
你好请看下面example.Though我用另一种方式做到了,但希望你正在寻找这个。
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Details</a></li>
<li><a href="#">Award</a></li>
<li><a href="#">More info</a></li>
</ul>
</div>
</nav>
参见 Fiddle NavBar Fiddle Demo
希望对您有所帮助。
对于 Bootstrap 4 阿尔法 6 / 贝塔:
这是正确的做法。您希望默认情况下向左浮动菜单。将按钮向右浮动 (float-xs-right
),但无法看到它 (hidden-lg-up
),然后 float-lg-right
ul
使其按您想要的方式工作。
查看此代码笔:
http://codepen.io/anon/pen/mAYAKd?editors=1100
它工作正常。
注意添加了 CSS:
@media screen and (max-width: 992px){
#main-navbar {
clear: both;
}
}
HTML:
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-toggleable-md" id="main-navbar">
<ul class="nav navbar-nav float-lg-right">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More info</a>
</li>
</ul>
</div>
</nav>