[英]Twitter bootstrap Navbar justified links with logo/brand
I cant seem to justify my links and have my logo in the navbar. 我似乎无法证明自己的链接合理,并在导航栏中显示徽标。 My links and logo will overlap on the left hand side.
我的链接和徽标将在左侧重叠。 I want to make it so my links will justify to the right of my logo.
我要这样做,以便我的链接在我徽标的右边对齐。
%body
%nav.navbar.navbar-inverse.navbar-fixed-top
.container-fluid
.navbar-header
%button.navbar-toggle.collapsed{"aria-controls" => "navbar", "aria-expanded" => "false", "data-target" => "#navbar", "data-toggle" => "collapse", :type => "button"}
%span.sr-only Toggle navigation
%span.icon-bar
%span.icon-bar
%span.icon-bar
.container-fluid
.navbar-header
%a.navbar-brand{:href => "#"}
%img{:alt => "IMage", :height => "50", :src => "/assets/logo.png"}
%ul.nav.navbar-nav.nav-justified
%li
%a{:href => "#"} link
%li
%a{:href => "#"} Link
%li
%a{:href => "#"} link
%li
%a{:href => "#"} link
%li
%a{:href => "#"} link
%li
%a{:href => "#"} link
%li
%a{:href => "#"} link
%li
%a{:href => "#"} link
css 的CSS
.navbar {
position: relative;
background-color: #004170;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 0;
font-size: 18px;
}
.navbar-nav.nav-justified > li{
float:none;
}
Try remove .navbar-nav
class from navbar code. 尝试从导航条代码中删除
.navbar-nav
类。
%ul.nav.navbar-nav.nav-justified
to 至
%ul.nav.nav-justified
If your navigation slightly move down then you can set below properties : 如果导航略微向下移动,则可以设置以下属性:
.nav-justified {
width: 98%;
}
.nav-justified > li {
float: none;
}
It works for me. 这个对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.