[英]Correcting vertical alignment of navbar link in Bootstrap 4
I am running into a weird issue with Bootstrap 4's .navbar
class in my Rails application. 我在Rails应用程序中遇到了Bootstrap 4的.navbar
类的奇怪问题。
In short, I am making a navbar, and I am trying to add a link on the right side. 简而言之,我正在制作导航栏,并尝试在右侧添加链接。 According to the documentation , the .pull-**-right
class should work within the navbar and put the link on the right side. 根据文档 , .pull-**-right
类应在导航.pull-**-right
工作,并将链接放在右侧。
Now it successfully does that; 现在它成功地做到了; however, the vertical alignment is off (even though the navbar-brand
link on the left is perfect): 但是,垂直对齐方式已关闭(即使左侧的navbar-brand
链接很完美):
<nav class="navbar navbar-full navbar-light" style="background-color: #002b52">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<%= link_to "Example", root_path, class: "navbar-brand" %>
<%= link_to "About Us", about_path, class: "pull-sm-right navlink" %>
</nav>
</div>
</nav>
It didn't work originally, so I made up the .navlink
class and added some CSS with: 它最初不起作用,所以我组成了.navlink
类,并添加了一些CSS:
.navlink {
vertical-align: middle;
}
Even after doing so, the right link isn't centered vertically (it's close to the top) even though the navbar-brand
is with no extra CSS magic. 即使这样做,即使navbar-brand
没有额外的CSS魔术,正确的链接也不会垂直居中(靠近顶部)。
Any ideas on why this is happening? 为什么会这样?
Seems like you're mixing Bootstrap v3 classes with v4 while not using the default navigation structure found in the documentation , particularly this: see Nav . 似乎您正在将Bootstrap v3类与v4混合使用,而不使用文档中提供的默认导航结构,尤其是: Nav 。 And the class navbar-header
doesn't exist in v4 . 并且v4中不存在navbar-header
类。
Hopefully this helps. 希望这会有所帮助。
Basic Setup 基本设定
.navbar
a.navbar-brand
ul.nav.navbar-nav
li.navbar-item
a.nav-link
Rails Example: Rails示例:
<nav class="navbar navbar-full navbar-light">
<%= link_to "Example", root_path, class: "navbar-brand" %>
<ul class="nav navbar-nav">
<li class="nav-item pull-sm-right">
<%= link_to "About Us", about_path, class: "nav-link" %>
</li>
</ul>
</nav>
Working Example: 工作示例:
.navbar { background-color: #002b52; } .navbar .navbar-nav li > .nav-link, .navbar a.navbar-brand { color: white; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-full navbar-light"> <a class="navbar-brand" href="#">Example</a> <ul class="nav navbar-nav"> <li class="nav-item pull-sm-right"> <a class="nav-link" href="#">About Us </a> </li> </ul> </nav>
this is because .navbar-brand has a lot of extra classes on it. 这是因为.navbar-brand上有很多额外的类。 did you want your links different font sizes or all the same?? 您是否希望链接使用不同的字体大小或全部相同?
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
just remove the classes off the links and leave the class navbar-brand or refer to the docs https://getbootstrap.com/components/#navbar 只需删除链接中的类并保留类navbar-brand或参考文档https://getbootstrap.com/components/#navbar
here is what you are after 这就是你所追求的
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button aria-expanded="false" class="navbar-toggle collapsed"
data-target="#bs-example-navbar-collapse-6" data-toggle=
"collapse" type="button"><span class="sr-only">Toggle
navigation</span> <span class="icon-bar"></span> <span class=
"icon-bar"></span> <span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id=
"bs-example-navbar-collapse-6">
<ul class="nav navbar-nav pull-right">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
this was from the docs which i linked 这是我链接的文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.