以响应方式居中和定位 Bootstrap 品牌和导航栏答案

【问题标题】：Centering and Positioning Bootstrap Brand and Navbar responsively以响应方式居中和定位 Bootstrap 品牌和导航栏
【发布时间】：2014-09-17 03:15:06
【问题描述】：

我一直在努力尝试获得一个居中对齐的引导导航栏，并且品牌在崩溃后仍然居中。就像下面这样：

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

原文来自here

但是，当我对新创建的导航栏执行此操作时，似乎应该在大屏幕上消失的品牌并没有，而是最终坐在顶部。我的在下面：

[My original fiddle][3]

我怀疑它已经完成了媒体查询，但我尝试了一些东西，但结果都是空的。

感谢任何帮助

【问题讨论】：

标签： twitter-bootstrap navbar

【解决方案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;
      }
}

+我已经分叉并更新了你的小提琴 -> UpdatedFiddle

【讨论】：

太棒了。现在我只需要弄清楚如何让第一个孩子 li 在崩溃时消失......我认为它类似于在上面的第一个媒体查询中的两个锚链接 a 之后添加 :first-child 在另一个媒体查询之后
居然修复了没有子选择器-max width media 查询之前使用的.visible-desktop类，设置为display:none;
顺便请你告诉我如何正确包含 jsfiddle 代码.....我的看起来很糟糕
您可以使用编辑器中的“链接”功能或cmets中的[链接描述]（yourlink.com）（不要忘记删除空格）
非常感谢，但我还有一个问题，如果我可以选择你的大脑......折叠时 .hidden-desktop 仍然位于导航栏扩展其高度的原始高度之上.. ..我试图在css上用负边距修复它，但我运气不佳。再次感谢你，我是个新手 :)