Question

我一直在努力尝试获得一个集中对齐的引导导航栏，品牌在崩溃后仍保持居中。完全像下面这样：

[Original Stack fiddle on centering the navbar][1]

最初来自here

然而，当我对新创建的导航栏进行操作时，看起来应该在较大屏幕上消失的品牌不会，并且最终会坐在上面。我的下面是：

[My original fiddle][3]

我怀疑它完成了媒体查询，但我尝试了一些事情，但是空洞的。

感谢任何帮助

Answer 1

首先，您应该在bootstrap.css之后添加CSS。

以下是正确显示所需的内容：

.hidden-desktop {
     display: none !important;
}
.visible-desktop {
     display: inherit !important;
}
@media (max-width: 979px){
    .nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a {
           padding: 9px 15px;
           font-weight: bold;
           color: #777777;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
           border-radius: 3px;
     }
}
@media (max-width: 979px){
    .navbar .brand {
           padding:10px;
           margin: 0 0 0 -5px;
    }
}
@media (max-width: 767px){
    .hidden-desktop {
           display: inherit !important;
     }
}

修改要使用CSS隐藏第一个，你需要这个（但是重用.visible-desktop类会更好）

这是隐藏第一个孩子的CSS

@media (max-width: 768px){ #twitterbootstrap .navbar .nav > li:first-child{ display: none ; } }

这是fiddle

编辑2

.hidden-desktop元素应放在.navbar-collapse <div>之前。此外，我将CSS更改为：

@media (max-width: 767px){ .hidden-desktop { display: inherit !important; padding: 15px; margin: 0 0 0 -5px; } }

+ 我分叉了＆amp;更新你的小提琴 - ＆gt; UpdatedFiddle

以响应方式定位和定位Bootstrap Brand和Navbar

1 个答案: