首先,这是我想要完成的:
Example http://www.n2media.com/img/header-example.jpg
我希望在大屏幕上有这样的外观,但在移动设备上又回到默认的 Bootstrap 导航栏:
Example2 http://www.n2media.com/img/header-example-mobile.jpg
我可以通过关注 this example. 来放大 Logo
我还发现了很多让简单链接居中的方法。我用的是这个:
.navbar.center .navbar-inner {
text-align: center;
}
.navbar.center .navbar-inner .nav {
display:inline-block;
float: none;
}
但是我无法让 navbar-brand
元素在所有简单链接之间居中。即使我这样做了,我也不确定如何将它从小屏幕的折叠元素中排除。
最佳答案
如果您乐于使用 Bootstrap 的响应实用程序并将 Logo 粘贴在两个位置,则可以根据屏幕大小显示/隐藏 Logo ,例如 this .
为了使默认情况下 float 的 Bootstrap 导航列表元素水平居中,您可以将整个列表包装在相对定位的 div 中,或者移除 float 并应用 display: inline-block
.在我给出的示例中,我使用了相对定位的 div,然后在与移动菜单出现时相同的媒体断点处将其清除,因为我认为它有点简单。
CSS
#nav-wrapper {
float: left;
position: relative;
left: 50%;
}
.navbar-nav {
position: relative;
left: -50%;
}
@media (max-width: 769px){
.navbar-inverse .navbar-brand img {
height: 100%;
}
.navbar-inverse .navbar-brand {
padding: 0;
}
#nav-wrapper {
float: none;
position: static;
}
.navbar-nav {
position: static;
}
}
关于css - 如何在 Bootstrap 3.2 的导航栏中将品牌形象与其他元素居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24924170/