gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 22:33:41 26 4
gpt4 key购买 nike

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

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

编辑:删除背景色样式可以解决这个问题,但这并不是一个真正的选择。编辑二:添加了所有 HTML,以及此屏幕截图:

enter image description here

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;
}

最佳答案

您应该将颜色应用于正文而不是 html。它不应该导致此问题,但仍然不是最佳做法。

编辑

问题出在引导框架的“行”类中。只需将以下内容添加到样式表中即可。

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

关于html - 样式化 HTML 元素导致页面宽度过大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47565081/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com