Bootstrap 3 CSS：导航栏上方的细白间隙仅在生产中的移动设备上答案

【问题标题】：Bootstrap 3 CSS: Thin white gap above navbar only on mobile in productionBootstrap 3 CSS：导航栏上方的细白间隙仅在生产中的移动设备上
【发布时间】：2016-07-03 03:01:45
【问题描述】：

我正在使用 Django + Bootstrap 3 + Heroku。在生产中，移动视口上的导航栏上方有一条细白线。它在所有页面上都有。在我的本地机器上，它不存在。我已经进行了完整性检查以确保它们是同步的。

制作：http://screencast.com/t/3Ukg9Lgu34N

本地：http://screencast.com/t/dNVQVtuWgW

我可以通过添加 .collapse { border: 0 !important; 在本地修复它。边距顶部：0！重要； }，但由于某种原因，它不会转化为生产。

完整的导航栏 css 见下文。您可以在这里查看制作现场：http://goo.gl/mwXfRl

知道发生了什么吗？

navbar-static-top.css：

.navbar {
    border: 0 !important;
    margin-top: 0 !important;
}

.navbar-static-top {
    margin-bottom: 0px !important;
    background-color: #11C356; /*#649072; #fafafa;*/
    border-color: #11C356;/* #649072; #fafafa; */
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
    font-size: 1.2em;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #e4e4e4; /*#0aa647;*/ /*#D5DED9*/
}

.navbar-default .navbar-toggle {
    border-color: transparent !important;
}

.navbar-toggle {
    background-color: #11C356;
    padding-top: 0px;
    padding-bottom: 0px; 
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}

.navbar-toggle:hover {
    background-color: #11C356;
    padding-top: 0px;
    padding-bottom: 0px; 
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}



.navbar-default .navbar-nav>li>a {
    color: #f2f2f2; /*#11C356;*/
    line-height: 30px;
}

.navbar-default .navbar-brand {
    /*font-family: 'Josefin Sans', sans-serif;*/
    font-family: 'Bitter', serif;
    color: #f2f2f2; /*#11C356;*/
    font-size: 28px;
}

.navbar-default .navbar-brand:hover {
    color: #e4e4e4; /*#0aa647; *//*#D5DED9*/
}

.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:focus, 
.navbar-default .navbar-nav>.open>a:hover {
    color: #0aa647;
    background-color: #fafafa; /*#11C356*/
}

.navbar-right .dropdown-menu {
    min-width: 0;
}

.dropdown-menu>li>a {
    padding-top: 7px;
    padding-right: 15px;
    padding-bottom: 7px;
    padding-left: 15px;
}

.navbar-collapse.collapse {
display: block!important;
}

.navbar-nav>li, .navbar-nav {
float: left !important;
}

.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}

.navbar-right {
float: right!important;
}

.collapse {
    border: 0 !important;
    border-color: #11C356;
    margin-top: 0 !important;
}

【问题讨论】：

标签： css django twitter-bootstrap heroku twitter-bootstrap-3

【解决方案1】：

只需像这样将margin-top: -1px 添加到navbar-static-top：

.navbar-static-top {
    margin-bottom: 0px !important;
    margin-top: -1px;
    background-color: #11C356;
    border-color: #11C356;
    /* border-style: solid; */
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
    font-size: 1.2em;
}

【讨论】：

【解决方案2】：

试试这个

.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
/* border: 1px solid transparent; */ or border:none;
}
.navbar-static-top {
margin-bottom: 0px !important;
background-color: #11C356;
/* border-color: #11C356; */
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 1.2em;
}

【讨论】：

【解决方案3】：

我终于在模板级别使用以下 css 解决了这个问题：

.navbar-default .navbar-collapse {
    border-style: hidden !important;

这更像是一个补丁，但它成功了。

【讨论】：