Question

导航栏和下拉菜单之间有空格。我必须删除该空格并插入一行。这是我的屏幕截图：

我希望我的菜单看起来像这样：

这是我的代码：

<div class="navbar-collapse collapse in" id="navbar-ex-collapse" style="height: auto;">
                <ul class="nav navbar-nav navbar-right nav-pull-right">
                    <li><!-- ngIf: loggedUser --><a style="margin-right: 100px;margin-top: px;border-bottom: black;" data-ng-if="loggedUser" class="ng-binding ng-scope">
                        <span class="fa fa-user iconAlign font-icon-size">&nbsp;</span>Shrivatsav, Deeksha</a><!-- end ngIf: loggedUser -->
                    </li>
                    <li><!-- ngIf: loggedUser --><div data-ng-if="loggedUser" class="ng-scope">
                            <!-- <button data-ng-click="logout()" type="button" class="btn btn-link logoutButton" >{{'LOGOUT' | translate}}</button>
                            <a data-ng-click="logout()" class="fa fa-sign-out font-icon-size" style="padding-right:-12px;"></a> -->
                            <a data-ng-click="logout()" class="fa fa-sign-out font-icon-size"></a>
                            <button data-ng-click="logout()" type="button" class="btn btn-link logoutButton ng-binding" style="padding-top:0px;">Log out</button>
                        </div><!-- end ngIf: loggedUser -->
                    </li>
                </ul>
            </div>

这是我的CSS：

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7;
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
    /* margin-top: -1px; */
    border: none;
    /* margin-bottom: -1px; */
}
.navbar-collapse.in {
    overflow-y: auto;
}
.collapse.in {
    display: block;
}

当我添加margin top : -1px时，它会离开wafrds，如图所示：

DEMO

我应该如何消除差距。请帮助我。

Answer 1

尝试这个

button.navbar-toggle {
    margin-bottom: 0;
    margin-top: 0;
    padding: 0 2px;
}

因为您定义了按钮

padding-top: 2px;
 padding-bottom: 2px;
    margin-top: 8px;
    margin-bottom: 8px;

以便显示到保证金顶部

<强> Demo

Answer 2

试试这个

@media (max-width: 767px) {
.nav>li{border-top:1px solid #444;}
.navbar-collapse{border-top:0;}
}

See demo

即使在使用border：none之后，也无法删除导航栏和下拉菜单之间的空格;

2 个答案: