css – 如何在Bootstrap 3.2导航栏中将品牌图像与其他元素对齐？

2023年5月10日 241次阅读

首先,这是我想要完成的事情：

Example http://www.n2media.com/img/header-example.jpg

我希望在大屏幕上有这样的外观,但在移动设备上然后回到默认的Bootstrap导航栏：

Example2 http://www.n2media.com/img/header-example-mobile.jpg

按照this example.我可以放大徽标

我还发现了很多方法可以让简单的链接集中在一起.我正在使用的是：

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
}

但是我无法让navbar-brand元素在所有简单链接之间居中.即使我这样做,我也不确定如何将其从小屏幕的折叠元素中排除.

最佳答案 如果您很乐意使用Bootstrap的Responsive Utilities并将徽标粘贴在两个位置,您可以根据屏幕大小显示/隐藏徽标,如
this.

为了水平居中Bootstrap的导航列表项(默认浮动),您可以将整个列表包装在相对定位的div中,或者删除浮点数并应用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;
   }
}
点赞