Html 引导导航栏xs视口的两条恼人的线条

我有一个基于Bootstrap v3.3.5的web应用程序，在这种情况下，当在xs视口（即在移动设备上）中查看它时，会出现两条恼人的行。代码如下：

<nav id="navbar" class="navbar navbar-default navbar-fixed-top" style="white-space:nowrap">

    <form class="navbar-form">

        <div class="container-fluid">
            <div class="row" style="white-space:nowrap">
                <div class="navbar-left">
                    <div class="btn-group">

                        <button data-step="3" data-intro="You can always get back to this page by clicking here" type="submit" class="btn btn-default" formaction="/myapps"><span class="glyphicon glyphicon-th-large"></span> Apps </button>

                        <button data-step="4" data-intro="Whenever you run a simulation, you can find the data here" type="submit" class="btn btn-default" formaction="/jobs"><span class="glyphicon glyphicon-tasks"></span> History </button>

                        <button data-step="5" data-intro="You can find other user's shared runs here" type="submit" class="btn btn-default hidden-xs" formaction="/jobs/shared"><span class="glyphicon glyphicon-pushpin"></span> Shared <span class="badge" style="background-color:tomato" id="new_shared_jobs"></span></button>

                                <button data-step="6" data-intro="Click this at any time to start a new run..." type="submit" class="btn btn-warning hidden-xs"
                                        formaction="/jobs/new">
                                    <span class="glyphicon glyphicon-play-circle"></span> extract</button>
                    </div>
                </div>

                <div class="hidden-xs hidden-sm">
                            <a href="/static/apps/extract/about.html"
                                class="navbar-brand" data-toggle="modal"
                                data-target="#footModal">extract :: w1ccb5</a>

                        <span class="navbar-brand">listing 6 files</span>

                        <div class="hidden-md">
                            <a href="#" class="navbar-brand" style="width:250px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap"
                               data-toggle="modal" data-target="#myModal">
                            <span class="glyphicon glyphicon-tag"></span> us-fed, f1120, 2016</a>
                        </div>
                </div>

                <div class="navbar-right hidden-xs" style="margin-right: 5px;">
                        <a href="#" class="navbar-brand hidden-xs">admin</a>
                    <div data-step="7" data-intro="Change your password or use advanced features (e.g. AWS, Docker integrations) here" class="btn-group">
                        <a data-toggle="dropdown" class="btn btn-default dropdown-toggle">
                            <span class="glyphicon glyphicon-menu-hamburger"></span></a>

                        <ul class="dropdown-menu" role="menu">
                            <li> <a href="/account">Account</a> </li>
                            <li class="divider"> </li>
                            <li> <a href="/aws">AWS</a>
                            <li> <a href="/docker">Docker</a>
                                    <li> <a href="/admin/show_users">Admin</a> </li>
                                        <li> <a href="/app/extract">Configure extract</a> </li>
                            <li class="divider"> </li>
                            <li> <a href="/logout">Logout</a> </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

    </form>

</nav>

在sm视口中显示：

这是在xs视口中：

---

正如您从代码中看到的，基本上我在一些按钮上设置了隐藏的xs类，我不想在xs视口中显示这些按钮。我怎样才能摆脱那两条讨厌的白线？感谢您的帮助。

您的.navbar表单包含边框和方框阴影，这就是为什么您会在手机大小的屏幕上看到这一点。要删除它，您需要添加以下内容：

@media only screen and (max-width : 768px) {

  .navbar-form {
    border: none;
    box-shadow: none;
    }
}

---

JSFIDLE:

您使用的是哪个版本的引导？请分享导航栏的CSS代码。Bootstrap 3.3.5。将共享上面的CSS

@media only screen and (max-width : 768px) {

  .navbar-form {
    border: none;
    box-shadow: none;
    }
}