html - 导航栏溢出 (x) 页面内容

Question

我使用 Bootstrap 3 创建了一个网站。在响应模式下，我的 index.html 页面有一个水平滚动条。我找不到导致此 overflow-x 的原因。这只发生在我的 index.html 页面中。

在其他页面中，不存在此溢出。起初我以为是我的 index.html 的 Contact 部分有一个盒子阴影导致 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 不是列。