<分区>
<分区>
我的问题是，当我在笔记本电脑上查看此页面时，页面底部出现水平滚动条。我已经尝试过人的事情，但不能让它消失。 还有一个问题，当我在我的笔记本电脑上查看这个页面时，它似乎太小了，但是当我在 chrome 中检查它时，它看起来还不错。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
header {
background-color: #EE6E73;
width: 100%;
}
header h1 {
margin: 0;
font-size: 45px;
}
body {
background-color: white;
min-height: 100%;
}
footer {
background-color: #EF9A9A;
position: fixed;
width: 100%;
bottom: 0;
}
footer h2 {
margin: 0;
}
header h1 {
text-align: center;
}
</style>
<title>My Resume</title>
</head>
<body>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<header>
<h1>My Resume</h1></header>
</div>
<div class="col-sm-12 col-md-8 col-lg-8">
<p style="font-size: 1.5625em">My name is John Doe. I have completed my abc from xyz and pursuing def from pqr. I am interested in making applications for the web and mobile, especially android os.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<p style="font-size: 1.5625em">My hobbies are:
<ol style="font-size: 1.5625em">
<li>Playing basketball</li>
<li>reading</li>
<li>traveling</li>
</ol>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<footer>
<h2 align="center">Contact Me</h2>
<br>
<p align="center">John Doe</p>
<p align="center">City</p>
</footer>
</div>
</body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-
theme.min.css" integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</html>
这是一个 jsfiddle 链接:https://jsfiddle.net/zvdm6de4/1/
最佳答案
试试这个代码
在行的换行处添加container-fluid div
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
header {
background-color: #EE6E73;
width: 100%;
}
header h1 {
margin: 0;
font-size: 45px;
}
body {
background-color: white;
min-height: 100%;
}
footer {
background-color: #EF9A9A;
position: fixed;
width: 100%;
bottom: 0;
}
footer h2 {
margin: 0;
}
header h1 {
text-align: center;
}
</style>
<title>My Resume</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<header>
<h1>My Resume</h1></header>
</div>
<div class="col-sm-12 col-md-8 col-lg-8">
<p style="font-size: 1.5625em">My name is John Doe. I have completed my abc from xyz and pursuing def from pqr. I am interested in making applications for the web and mobile, especially android os.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<p style="font-size: 1.5625em">My hobbies are:
<ol style="font-size: 1.5625em">
<li>Playing basketball</li>
<li>reading</li>
<li>traveling</li>
</ol>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<footer>
<h2 align="center">Contact Me</h2>
<br>
<p align="center">John Doe</p>
<p align="center">City</p>
</footer>
</div>
</div>
</body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>关于css - 如何消除这个用 bootstrap 创建的 html/css 页面中的水平滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43337440/