Question

我正在使用Django + Bootstrap 3 + Heroku。在制作中，移动视口上的导航栏上方有一条细白线。它出现在所有页面上。在我的本地机器上，它不存在。我已经完成了理智检查以确保它们是同步的。

我能够通过添加.collapse {border：0！important; margin-top：0！important;但是由于某种原因，它并没有转化为生产。

请参阅下面的完整导航栏css。您可以在此处查看生产站点：{{3}}

知道发生了什么事吗？

导航栏静电-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;
}

Answer 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;
}

Answer 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;
}

Answer 3

我最终在模板级别用以下css修复了这个问题：

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

它更像是一个补丁，但它确实可以解决问题。

Bootstrap 3 CSS：仅在生产中的移动设备上使用导航栏上方的薄白色间隙

3 个答案: