【发布时间】：2019-05-28 03:07:01
【问题描述】：
我在移动版中有一些奇怪的空间，这里有一些图片：
这是它在桌面上的外观：
还有一部手机：
Mobile #01 - with spacing on the right
Mobile #02 - with a "h3 class="display-4" maybe calling that spacing?
HTML：
<!-- The beginning of html -->
<!DOCTYPE HTML>
<html lang="PL-pl">
<head>
<title>The page is being rebuilt...</title>
<meta charset="utf-8">
<!-- versioning can often help (href="css/style.css?ver=2.0") -->
<!-- BOOTSTRAP 4 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<main>
<div class="jumbotron jumbotron-fluid text-white text-center bg-info nomarginbottom">
<div class="container">
<h3 class="display-2">This site is being finally rebuilt!</h3>
<p class="lead">Hence it will have more features soon.</p>
</div>
</div>
<div class="container-fluid">
<div class="row mt-3 text-center">
<div class="col-12">
<h3 class="display-4">Sites done:</h3>
</div>
</div>
<div class="row justify-content-center mt-2 text-white text-center mb-4">
<div class="col-12 col-lg-4">
<a class="websitelink" href="https://reportsquestionsznaczki65.000webhostapp.com/wszyscy.html">
<div class="box lead p-4">Go to: "WSZYSCY"</div>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-12 change"><h4 class="display-4">What will be changed?</h4></div>
</div>
<div class="text-center">
<div class="row change2">
<p class="col-sm-6 col-lg-3 feature lead">The structure of the page.</p> <!-- class feature not used -->
<p class="col-sm-6 col-lg-3 feature lead">The site will be now responsive.</p>
<p class="col-sm-6 col-lg-3 feature lead">Lessons will be adding automatically via JS.</p>
<p class="col-sm-6 col-lg-3 feature lead">More code, more readable..</p>
</div>
<div class="row change2">
<div class="col-sm-6 col-lg-3 feature lead"><p>Sleek look.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>Fast and comprehensive.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>Inspiring quotes.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>And much more...</p></div>
</div>
</div>
<div class="row change2">
<div class="col-12">
<h5 class="text-center border border-3 border-dashed border-info change3 nomarginbottom">
<q>You can do everything, unless your imagination has stopped you.</q>
</h5>
</div>
</div>
<div class="row change2">
<div class="col-12">
<h3 class="display-4 text-center nomarginbottom">Current status: Learning Bootstrap 4.2 (80%) + Added "wszyscy.html".</h3>
<p class="lead text-center nomarginbottom">Overall status: 5% done on the page.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-12">
<h5 class="text-center border border-3 border-dashed border-info change3 nomarginbottom">
<q>Change is best, when it's changing with you, not without.</q>
</h5>
</div>
</div>
</div>
</main>
<noscript>
<meta http-equiv="refresh" content="0; URL=https://reportsquestionsznaczki65.000webhostapp.com/noscript.html"/>
</noscript>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS (restyled.css)：
body {
background-color: #eee;
}
/* Rebuilding the page */
.change {
padding: 30px 10px;
background-color: #dedede;
}
.change2 {
padding: 15px 5px;
}
.change3 {
padding: 20px 5px;
}
.nomargin {
margin: 0;
}
.nomarginbottom {
margin-bottom: 0;
}
img[alt="www.000webhost.com"] {
display: none;
}
.border-3 {
border-width: 3px !important;
}
.border-dashed {
border-style: dashed !important;
}
.websitelink, .websitelink:hover {
text-decoration: none;
color: #FFF;
}
.box {
background-color: #343a40;
font-size: 170%;
}
.box:hover {
background-color: darkslategray;
cursor: pointer;
}
这是网站：
https://reportsquestionsznaczki65.000webhostapp.com
由于它是在线的，您可以使用：
查看源：https://reportsquestionsznaczki65.000webhostapp.com/index.html https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css
感谢您的帮助。
【问题讨论】：
-
您在哪个移动浏览器中看到了额外的间距？我在 Chrome 中进行了测试，一切看起来都很好。
-
你的
nomarginbottom类在小于 350 的分辨率下会产生问题，所以删除display-4并为其提供完美的字体大小 -
我测试过的 Chrome 和 Firefox 上的移动版本，两者都有相同的东西，删除类“nomarginbottom”或删除 CSS 中的 font-size 属性没有改变任何东西。我的手机宽度是360px
-
添加一个字体较小的新类“display-5”有帮助
-
我添加了一个新类“display-5”，在其中我将不同的字体大小写入 2 5 rem 并将其设置为实际不在页面之外的标题。感谢您的结论！
标签： html css bootstrap-4 spacing