Question

最终答案似乎是将.row的样式编辑为margin-right: 0 !important;并将正文元素的样式编辑为overflow-x: hidden;谢谢大家！

在我的网站中，我使用background-color设置html元素的样式以填充整个页面。但是，这样做时，页面宽度会增加并使其可以水平滚动。有没有什么办法解决这一问题？我正在使用的唯一框架是Bootstrap，我一直试图解决这个问题大约一周。

编辑：删除背景颜色样式摆脱了问题，但这不是一个真正的选择。编辑二：添加了所有HTML，以及此屏幕截图：

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>League Site</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="outer">
            <div class="row">
                <div class="col-lg-2"><h1>AnotherLOLSite</h1></div>
                <div class="col-lg-10"></div>
            </div>
            <div id="menu">
                <div class="row">
                    <div class="col-lg-2 menu-item"><h4>Home</h4></div>
                    <div class="col-lg-2 menu-item"><h4>Item DB</h4></div>
                    <div class="col-lg-2 menu-item"><h4>About</h4></div>
                    <div class="col-lg-6"></div>
                </div>
            </div>
            <div id="body" align="center">
                <form class="summoner-search" method="POST">
                    <input type="text" class="summoner-input" placeholder="Enter a summoner name...">
                    <button type="submit">GO!!!</button>
                </form>
            </div>
        </div>
    </body>
</html>

相关CSS

html {
    background-color: #081f44;
}

#outer {
    background-color: #081f44;
}

#menu {
    background-color: #000000;
}

.menu-item {

    color: gray;
}

.summoner-input {
    border-radius: 3px;
    width: 30em;
    height: 2em;
}

Answer 1

你应该将颜色应用于body而不是html。它不应该导致这个问题，但仍然不是最佳做法。

编辑

问题出在bootstrap框架的类'row'中。只需将以下内容添加到样式表中即可。

.row{
     margin-right:0!important;
 }

Answer 2

为什么在html中使用background-color而不是body标签？

body{
 background-color:#081f44;
 min-height: 100vh; //Fill all the screen 
}

样式化HTML元素会导致页面宽度过大

2 个答案: