首页 前端开发 带有左对齐、居中或右对齐项目的 Bootstrap NavBar
带有左对齐、居中或右对齐项目的 Bootstrap NavBar
[英] Bootstrap NavBar with left, center or right aligned items
本文介绍了带有左对齐、居中或右对齐项目的 Bootstrap NavBar的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在Bootstrap 中，创建左侧有徽标A、中间有菜单项、右侧有徽标B 的导航栏的最平台友好方式是什么?
这是我到目前为止所尝试的，它最终对齐，以便徽标 A 在左侧，徽标旁边的菜单项在左侧，徽标 B 在右侧.
<div class="navbar navbar-fixed-top navbar-custom "><div class="container" ><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a> <div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#about">菜单项 1</a></li><li><a href="#contact">菜单项 2</a></li><li><a href="#about">菜单项 3</a></li><ul class="nav navbar-nav navbar-right"><li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
解决方案
2021 更新
引导程序 5(测试版) Bootstrap 5 也有一个 flexbox 导航栏，并引入了新的 RTL 支持.出于这个原因，左"的概念出现了.和正确的"已被替换为开始"和结束".因此，Bootstrap 5 测试版的保证金实用程序发生了变化:
ml-auto =>ms-automr-auto =>me-auto还要注意 data-toggle 和 data-target 也发生了变化:
数据切换 =>data-bs-toggledata-target =>data-bs-target
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link";href=#">左</a><li class="nav-item"><a class="nav-link";href="//codeply.com">Codeply</a><li class="nav-item"><a class="nav-link";href=#">链接</a><li class="nav-item"><a class="nav-link";href=#">链接</a><li class="nav-item"><a class="nav-link";href=#">链接</a> <div class="mx-auto order-0"><a class="navbar-brand mx-auto";href=#">Navbar 2</a><button class="navbar-toggler";类型=按钮"数据切换=折叠"数据目标=.dual-collapse2"><span class="navbar-toggler-icon"></span>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2"><ul class="navbar-nav ml-auto"><li class="nav-item"><a class="nav-link";href=#">右</a><li class="nav-item"><a class="nav-link";href=#">链接</a>
</nav>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0"><ul class="navbar-nav ml-auto text-center"><li class="nav-item active"><a class="nav-link";href=#">链接</a><div class="mx-auto my-2 order-0 order-md-1 position-relative"><a class="mx-auto";href=#"><img src="//placehold.it/120/ccff00";class=圆形"></a><button class="navbar-toggler";类型=按钮"数据切换=折叠"数据目标=.dual-collapse2"><span class="navbar-toggler-icon"></span>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2"><ul class="navbar-nav mr-auto text-center"><li class="nav-item"><a class="nav-link";href=#">链接</a>
</nav>
或 ，这些其他 Bootstrap 4 对齐方案:
<小时>
<小时>更多 Bootstrap 4 示例 :
<div class="navbar-header"><按钮类型=按钮"class =导航栏切换"数据切换=折叠"数据目标=.navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand";href=#">品牌</a><div class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-left"><li><a href=#">左</a></li><li><a href=#about">Left</a></li><ul class="nav navbar-nav navbar-right"><li><a href=#about">右</a></li><li><a href=#contact">右</a></li>
</nav>.navbar-品牌{位置:绝对；宽度:100%；左:0；文本对齐:居中；保证金:0 自动；}.navbar-toggle {z-索引:3；}
<div class="navbar-header"><按钮类型=按钮"class =导航栏切换"数据切换=折叠"数据目标=.navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href=#">左</a></li><ul class="nav navbar-nav navbar-center"><li><a href=#">中心</a></li><li><a href=#">中心</a></li><li><a href=#">中心</a></li><ul class="nav navbar-nav navbar-right"><li><a href=#">右</a></li>
</nav>@media(最小宽度:768px){.navbar-nav.navbar-center {位置:绝对；左:50%；变换:translatex(-50%);}}
.navbar .navbar-header,.navbar-collapse {浮动:无；显示:内联块；垂直对齐:顶部；}@media(最大宽度:768px){.navbar-collapse {显示:块；}}http://codeply.com/go/1lrdvNH9GI
更多示例:
左品牌，中心链接 左拨动开关，中心品牌
对于 3.x，另见导航对齐:引导中心导航栏 ><小时>
Bootstrap 中的中心导航栏 Bootstrap 4 将导航栏项目向右对齐
In Bootstrap , what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right?
Here is what I've tried so far, and it ends up being aligned so that Logo A is on the left, menu items next to the logo on the left and Logo B on the right.
<div class="navbar navbar-fixed-top navbar-custom ">
<div class="container" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Menu Item 1</a></li>
<li><a href="#contact">Menu Item 2</a></li>
<li><a href="#about">Menu Item 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
</ul>
</div>
</div>
</div>
解决方案
2021 Update
Bootstrap 5 (beta) Bootstrap 5 also has a flexbox Navbar, and introduces new RTL support. For this reason the concept of "left" and "right" has been replaced with "start" and "end". Therefore the margin utilities changed for Bootstrap 5 beta:
ml-auto => ms-automr-auto => me-auto
Also note that data-toggle and data-target have changed too:
data-toggle => data-bs-toggledata-target => data-bs-target
Navbar Demo for Bootstrap 5
Bootstrap 4 Now that Bootstrap 4 has flexbox, Navbar alignment is much easier. Here are updated examples for left , right and center in the Bootstrap 4 Navbar , and many other alignment scenarios demonstrated here
The flexbox , auto-margins , and ordering utility classes can be used to align Navbar content as needed. There are many things to consider including the order and alignment of Navbar items (brand, links, toggler) on both large screens and the mobile/collapsed views. Don't use the grid classes (row,col) for the Navbar .
Here are various examples...
Left, center(brand) and right links:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
http://codeply.com/go/qhaBrcWp3v
Another BS4 Navbar option with center links and overlay logo image
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto my-2 order-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/120/ccff00" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Or , these other Bootstrap 4 alignment scenarios:
brand left, dead center links, (empty right)
brand and links center, icons left and right
More Bootstrap 4 examples :
toggler left on mobile, brand right center brand and links on mobile right align links on desktop, center links on mobile left links & toggler, center brand, search right
Also see: Bootstrap 4 align navbar items to the right Bootstrap 4 navbar right align with button that doesn't collapse on mobile Center an element in Bootstrap 4 Navbar
Bootstrap 3 Option 1 - Brand center, with left/right nav links:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
http://bootply.com/98314 (3.x)
Option 2 - Left, center and right nav links:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right</a></li>
</ul>
</div>
</nav>
@media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
http://bootply.com/SGYC6BWeBK
Option 3 - Center both brand and links
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://codeply.com/go/1lrdvNH9GI
More examples:
Left brand, center links Left toggler, center brand
For 3.x also see nav-justified: Bootstrap center navbar
Center Navbar in Bootstrap Bootstrap 4 align navbar items to the right
这篇关于带有左对齐、居中或右对齐项目的 Bootstrap NavBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
