引導導航欄2條惱人的線XS視口

Question

我在這種情況下，當在視口中XS觀察自舉v3.3.5基於web的應用程序（即，在移動）2條惱人的線出現。該代碼是在這裏：

<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視：

正如你可以從代碼中看到，基本上我的設置上，我不想在XS視口顯示了一些按鈕，隱藏-XS類。我怎樣才能擺脫這兩條煩人的白線？感謝任何幫助。

Answer 1

你.navbar形式包含邊框和陰影盒子，這就是爲什麼你看到的是在移動屏幕尺寸。要刪除它，你需要添加以下內容：

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

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

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