在Bootstrap中,创建一个左边是Logo A、中间是菜单项、右边是Logo B的导航条,最有利于平台的方式是什么?
这是我到目前为止所尝试的,结果是Logo A在左边,Logo旁边的菜单项在左边,Logo 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>
</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>
2019年更新
现在Bootstrap 4有了flexbox,Navbar的对齐方式就容易多了。这里有Bootstrap 4导航条中左、右和中心的更新实例,以及许多其他对齐方案在此演示。
可以根据需要使用flexbox、auto-margins和ordering实用类来对齐Navbar内容。有许多事情需要考虑,包括在大屏幕和移动/折叠视图上的导航栏项目(品牌、链接、切换器)的顺序和排列。不要为导航条使用网格类(row,col)。
这里有各种例子...
左边、中间(品牌)和右边的链接:
<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://www.codeply.com/go/qhaBrcWp3v
另一个BS4导航条选项,带有中心链接和覆盖标志图像。
<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>
或,这些其他的Bootstrap 4对齐方案。
品牌左边,死的中心链接,(空的右边)<br>。
品牌和链接居中,图标居左和居右<br>。
更多的Bootstrap 4例子。
手机上的切换器在左边,品牌在右边
品牌和链接在移动端居中
桌面上链接右对齐,手机上链接居中
左边链接& toggler,中间品牌,右边搜索
另见:https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-item-to-the-right<br/>。 https://stackoverflow.com/questions/51852374/bootstrap-4-navbar-right-align-with-button-that-doesnt-collapse-on-mobile<br/>。 https://stackoverflow.com/questions/33867603/center-an-element-in-bootstrap-4-navbar
选项1 - 品牌中心,有左/右导航链接。
<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;
}
选项2 - 左、中、右导航链接。
<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://www.bootply.com/SGYC6BWeBK
选项3 - 品牌和链接都居中
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://www.codeply.com/go/1lrdvNH9GI
更多的例子:
对于3.x也可以看到nav-justified: https://stackoverflow.com/questions/21453781/bootstrap-center-navbar/21459341#21459341
https://stackoverflow.com/questions/39945599/center-navbar-in-bootstrap/42736011#42736011
https://stackoverflow.com/questions/41513463/<br>。
我需要类似的东西(左、中、右对齐的项目),但要能将居中的项目标记为活动。对我来说有效的方法是
http://www.bootply.com/CSI2KcCoEM
<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 class="navbar-left"><a href="#">Left 1</a></li>
<li class="navbar-left"><a href="#">Left 2</a></li>
<li class="active"><a href="#">Center 1</a></li>
<li><a href="#">Center 2</a></li>
<li><a href="#">Center 3</a></li>
<li class="navbar-right"><a href="#">Right 1</a></li>
<li class="navbar-right"><a href="#">Right 2</a></li>
</ul>
</div>
</nav>
CSS。
@media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
ootstrap 4
我们有很多方法来对齐导航条项目。
为左对齐 [![在此输入图像描述][1]][1]
class = "navbar-nav mr-auto"
用于右对齐 [![在此输入图像描述][2]][2]
class = "navbar-nav ml-auto"
用于中心对齐 [![在此输入图像描述][3]][3]
class = "navbar-nav mx-auto"
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>
[1]: https://i.stack.imgur.com/elnmi.jpg [2]: https://i.stack.imgur.com/bV9JJ.jpg [3]: https://i.stack.imgur.com/5QtXz.jpg
导航条是用flexbox构建的! 你需要使用flexbox和margin工具来代替浮动条。
为了向右对齐,在 "collapse "div上使用 "justify-content-end"。
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
完整的例子在这里。 https://jsbin.com/kemawa/edit?output
咂咂嘴,刚刚重读了我的回答,发现上边要求的是两个logo'的一个在左边一个在右边,中间有一个菜单,而不是其他方式。
严格来说,可以在HTML中使用Bootstrap'的"navbar-right"来实现。 和"navbar-left" 的标志,然后用"nav-justified" 而不是"navbar-nav"。 为你的UL。 不需要额外的CSS(除非你想在xs视口中把navbar-collapse toggle放在中心位置,否则你需要覆盖一点,但这将由你决定)。
<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 class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>
</div>
<div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li><a href="#">home</a></li>
<li><a href="#about">about</a></li>
</ul>
</div>
</nav>
Bootply。 http://www.bootply.com/W6uB8YfKxm
对于那些到了这里试图中心的"品牌"。 这里是我的老答案。
我知道这条线有点老了,但只是为了发布我在工作中的发现。 我决定以skelly'的答案为基础,因为tomaszbak'的断裂在崩溃。 首先我创建了我的"navbar-center"。 并在CSS中关闭了普通导航条的浮动功能。
.navbar-center
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar-brand{
float:none;
}
然而skelly'的答案的问题是,如果你有一个非常长的品牌名称(或者你想为你的品牌使用图像),那么一旦你到达sm视口,由于绝对位置可能会有重叠,正如评论者所说,一旦你到达xs视口,切换开关就会中断(除非你使用Z定位,但我真的不想担心它)。
所以我所做的是利用bootstrap响应式实用工具来创建多个版本的品牌块。
<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 class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>
<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>
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
<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>
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>。
所以现在lg和md视口的品牌居中,链接在左边和右边,一旦你到了sm视口,你的链接就会下降到下一行,这样你就不会和你的品牌重叠,然后最后在xs视口,折叠启动,你就可以使用切换。 你可以更进一步,修改navbar-right和navbar-left的媒体查询,当与navbar-brand一起使用时,这样在sm视口中的链接都是居中的,但没有时间去审核它。
你可以在这里查看我的旧引导程序。 www.bootply.com/n3PXXropP3
我想有3个品牌可能和"z"一样麻烦。 但我觉得在响应式设计的世界里,这个解决方案更适合我的风格。
这是个过时的问题,但我在bootstrap的github页面上找到了一个替代的解决方案。
文档还没有更新,而且在SO上还有其他问题在问同样的解决方案,尽管问题略有不同。
这个解决方案并不针对你的情况,但是你可以看到,这个解决方案是<div class="container">
就在<nav class="navbar navbar-default navbar-fix-top">
之后,但是也可以根据需要用<div class="container-fluid"
替换。
<!DOCTYPE html>
<html>
<head>
<title>Navbar right padding broken </title>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/" class="navbar-brand">Hello</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group navbar-btn" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
</div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
解决办法是在这个页面的一个提琴上找到的。 https://github.com/twbs/bootstrap/issues/18362
并在V3中被列为不会't修复。
<div class="d-flex justify-content-start">hello</div>。
<div class="d-flex justify-content-end">hello</div>。
<div class="d-flex justify-content-center">hello</div>。
<div class="d-flex justify-content-between">hello</div>。
<div class="d-flex justify-content-around">hello</div>。
根据上面的划分,把你想居中、居右、居左的字段放进去。
最简单的解决方案。
只要把导航条分成几列就可以了。 比如说,如果你有24列,那么12列是空的,12列是在导航条上。
<nav class="navbar navbar-default">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-12">
<ul class="nav navbar-nav" align="center">
<li><a href="#">Home</a></li>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li><a href="#">Fourth Link</a></li>
</ul>
</div>
</div>
</nav>