我使用startbootstrap-small-business模板并尝试根据我的需要进行调整。
我添加了一个新徽标,并被迫将导航栏的高度更改为ca. 120像素。
我现在需要/想要做的是垂直对齐徽标右侧的链接。他们需要在导航栏的中间。
我尝试对导航栏的line-height:60px
元素使用行高(@media {line-height:2px }
和.navbar-nav li a
),它适用于正常的浏览器分辨率,但是当我更改浏览器的大小以进行检查时如何在小型设备中看到线高不会被@media覆盖,它仍然需要60px的大小,下拉菜单中链接的高度要大。有人可以帮助我吗?
/*!
* Start Bootstrap - Small Business HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 110px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar {
min-height: 100px;
}
.navbar-fixed-top .nav {
padding: 0;
}
.navbar-nav li a {
line-height: 60px;
}
.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}
.navbar-inverse {
background-color:#000;
}
footer {
padding: 30px 0;
}
@media(min-width:@screen-sm-min) {
body {
padding-top: 110px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .navbar-brand {
padding: 0;
}
.navbar-nav li a {
line-height: 2px;
}
}
答案 0 :(得分:1)
我在这个主题的帮助下得到了它: Bootstrap 3 Navbar with Logo。 这是解决我的问题
@AmperPil你的想法在我的情况下不起作用;)无论如何,谢谢你的帮助
答案 1 :(得分:-1)