在導航欄啓動後刪除多餘的空間

我試過這段代碼來創建一個帶有以導航欄爲中心的標誌的啓動導航，但我在頁面的右側獲得了額外的空間。我想修復導航欄之後的額外空間。使用此代碼頁面滾動到右側的空白區域，頁面應該不會超出導航欄。在導航欄啓動後刪除多餘的空間

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
.navbar { 
 
    text-transform: uppercase; 
 
    background-color: #27B6C9; 
 
    position: relative; 
 
    top: 0px; 
 
    font-size: 14px; 
 
    border-bottom: none; 
 
    margin-bottom: 0px; 
 
    padding: 0px 0px; 
 
    font-weight: 600; 
 
} 
 
.navbar-brand { 
 
    padding: 0 10px; 
 
    height: auto; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar-nav { 
 
    position: relative; 
 
    right: -50%; 
 
    } 
 
    .navbar-nav > li { 
 
    position: relative; 
 
    left: -50%; 
 
    } 
 
    .navbar-nav > li a { 
 
    line-height: 126px; 
 
    vertical-align: middle; 
 
    padding: 0 18px; 
 
    } 
 
} 
 
@media (min-width: 892px) { 
 
    .navbar-nav > li a { 
 
    padding: 0 30px; 
 
    } 
 
} 
 
@media (min-width: 1100px) { 
 
    .navbar-nav > li a { 
 
    padding: 0 40px; 
 
    } 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"> 
 
     <img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" alt="WPO LOGO" width="80" /> 
 
     </a> 
 
    </div> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#policies">Policies</a> 
 
     </li> 
 
     <li class="hidden-xs"> 
 
      <a href="#"> 
 
      <img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" alt="Brand" width="80" /> 
 
      </a> 
 
     </li> 
 
     <li><a href="#calendar">Calendar</a> 
 
     </li> 
 
     <li><a href="#faq">FAQ</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

來源

2016-12-15 Alanoud

我添加新的類MR0，並將其添加在你的按鈕導航欄

副本這個類在你的CSS和relpace你的按鈕

.mr0{ 
margin-right:0pxImportant; 
} 

<button type="button" class="navbar-toggle mr0" data-toggle="collapse"

來源

2016-12-15 21:12:45

在導航欄啓動後刪除多餘的空間

回答

相關問題