Question

我使用Bootstrap 3创建了一个网站。在响应模式下，我的index.html页面有一个水平滚动条。我找不到造成这种溢出的原因-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＆gt;项目部分中的.gallery导致滚动条，因为.gallery不是列。

navbar溢出（x）页面内容

1 个答案: