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

Question

我已經使用Bootstrap 3創建了一個網站。 在響應模式下，我的index.html頁面具有水平滾動條。 我找不到導致此溢出的原因。 這僅發生在我的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;
}

該網站也可以在這里找到

請幫助我解決此問題。

Answer 1

確保遵循網格的“規則” ...

.col-*列必須用.row ，並且只有 .col-*應該是.col-*的直接.row

項目部分中的.row > .gallery導致滾動條，因為.gallery不是列。