Question

我有一个基于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>

相关的CSS在这里：

.navbar {
    /* carbon fiber */
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
    background-size: 10px 10px, 10px 10px, 10px 5px;
    background-position: 0px 0px, 5px 5px, 0px 0px;
    opacity: 0.9;
}

.navbar-brand {
    color: #9d9d9d
}

.navbar-brand:hover { color:yellow !important }

a.navbar-brand:hover { color:white !important }

#navbar {
    border-bottom-color: #0099CC;
    border-bottom-width: 2px;
}

#navaction {
    border-top-color: #0099CC;
    border-top-width: 2px;
}

这是sm视口中的：

这里是xs viewport：

从代码中可以看出，基本上我在一些我不希望在xs视口中显示的按钮上设置hidden-xs类。我该如何摆脱那两条恼人的白线呢？感谢任何帮助。

Answer 1

您的.navbar表单包含边框和框阴影，这就是您在移动尺寸屏幕上看到此内容的原因。要删除它，您需要添加以下内容：

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

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

JSFiddle：https://jsfiddle.net/khj0exje/

Bootstrap Navbar两个烦人的xs视口行

1 个答案: