个人中心
gpt4 book ai didi

html - 移动版 bootstrap 4.2.1 上的间距

转载 作者：行者123 更新时间：2023-11-28 00:38:38 26 4
gpt4 key购买 nike

我在移动版本中有一些奇怪的空间，这里有一些图片:

这是它在桌面上的样子:

Desktop #01

Desktop #02

还有一部手机:

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

感谢您的帮助。

最佳答案

移动版本中的文本“wszyscy.html”由于其字体大小而比屏幕大。把它变小，你将不再看到那个空间

关于html - 移动版 bootstrap 4.2.1 上的间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53989885/

26 4 0
文章推荐： c++ - 如何使用通配符指定每个源文件对其对应的头文件的依赖？
文章推荐： javascript ajax post表单功能和验证
文章推荐： c++ - 如何从无符号变量写入和读取字节
文章推荐： javascript - 如何在 Twitter 对话中的每个无限滚动事件上执行 Greasemonkey 脚本？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com