導航欄溢出（x）頁面內容

Question

我使用Bootstrap 3創建了一個網站。在響應模式下，我的index.html頁面有一個水平滾動條。我找不到是什麼導致這個overflow-x。這隻發生在我的index.html頁面。

在其他頁面中，此溢出不存在。起初，我認爲這是我的index.html的聯繫部分中的東西，它有一個盒子的陰影，造成了x的溢出。即使在刪除它之後，仍然存在溢出，這讓我得出結論，導航欄是造成問題的原因之一。

我無法找到導致此問題的原因。

截圖：（右側溢出），用於導航欄

HTML代碼：

<header id="main"> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false"> 
        <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" href=""> 
        <!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> --> 
        SRS Constructions 
       </a> 
      </div> 
      <div class="collapse navbar-collapse navbar-right" id="collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a> 
        </li> 
        <li class="dropdown" id="nav-about"> 
         <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About 
         </a> 
         <ul class="dropdown-menu" style="left:0;right: auto"> 
          <li><a href="about.html">The Founder</a></li> 
          <li role="separator" class="divider"></li> 
          <li><a href="health-policy.html">HSE Policy</a></li> 
          <li><a href="quality-policy.html">Quality Policy</a></li> 
         </ul> 
        </li> 
        <li><a class="main" href="#services">Services</a></li> 
        <li><a class="main" href="#projects">Our Projects</a></li> 
        <li><a class="main" href="#whyus">Why Us</a></li> 
        <li><a class="main" href="#contact">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

我還沒有添加其改變的寬度的任何特定的CSS的導航欄。

CSS的導航欄：

/*Navbar styles*/ 

.navbar { 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); 
} 

.navbar-default .navbar-nav { 
    font-size: 15px; 
} 

.navbar-fixed-top { 
    min-height: 80px; 
} 

.navbar-nav > li > a { 
    padding-top: 0px; 
    padding-bottom: 0px; 
    line-height: 80px; 
} 


.dropdown-menu > .active > a, 
.dropdown-menu > .active > a:hover, 
.dropdown-menu > .active > a:focus { 
    color: #ffffff; 
    text-decoration: none; 
    outline: 0; 
    background-color: #b4a28f; 
} 

@media (max-width: 767px) { 
    .navbar-nav > li > a { 
     line-height: 30px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .navbar-brand > img { 
     width: 40%; 
     position: relative; 
     display: inline-block; 
     height: auto; 
     margin-left: 90px; 
     margin-top: -80px; 
    } 
    #footer { 
     color: #2e2e2e; 
    } 
} 

@media (min-width: 767px) { 
    #footer { 
     color: #ffffff; 
    } 
} 

.navbar-brand > img { 
    width: 30%; 
    position: relative; 
    display: inline-block; 
    height: auto; 
    margin-left: 50px; 
    margin-top: -15px; 
} 

該網站還提供here

請幫我解決這個問題。

Answer 1

確保遵循了電網的「規則」 ......

列.col-*必須被包裹在.row，並且只有.col-*應的.row

.row>.gallery直接子在項目部分導致滾動條，因爲.gallery不是一列。