移动视图中右侧大屏幕中的空白区域答案

【问题标题】：White space in the jumbotron on the right side in mobile view移动视图中右侧大屏幕中的空白区域
【发布时间】：2018-08-07 01:03:20
【问题描述】：

我发现了很多这方面的信息，但没有什么能真正帮助我找出问题所在。以下是有问题的空白区域的样子：

你能告诉我，这个空白是从哪里来的吗？

我知道问题部分是 jumbotron 之后的部分。当我删除它时，空白就消失了。你能告诉我我在定位/间距或类似方面做错了什么吗？

    <!DOCTYPE html>
<html lang="de">

<head>
    <!-- Wichtige Meta Daten -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS
  ============================================================================================= -->

    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Spectral:300,400" rel="stylesheet">
    <!-- Simple Line Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
    <!-- Custom -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>

    <header>
        <!-- Start Navigation -->

        <nav class="navbar navbar-expand-md navbar-dark fixed-top hero-bg">
            <div class="container mx-auto nav-line">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

                <div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="#texting" class="nav-link">Texting</a>
                        </li>
                        <li class="nav-item">
                            <a href="#eventkonzeption" class="nav-link">Event Konzeption</a>
                        </li>
                        <li class="nav-item">
                            <a href="#impression" class="nav-link">Impressionen</a>
                        </li>
                        <li class="nav-item">
                            <a href="#ueber" class="nav-link">Über mich</a>
                        </li>
                        <li class="nav-item">
                            <a href="#kontakt" class="nav-link">Kontakt</a>
                        </li>
                    </ul>
                    <!-- navbar-nav -->
                </div>
                <!-- navbar-collapse -->

            <!-- container -->
        </div>
        </nav>

        <!-- Ende Navigation -->
    </header>

    <!-- Header -->
    <section id="home" class="hero-bg">
    <div class="container jumbotron hero-bg">
        <div class="align-items-start row justify-content-center">

        <div class="container pt-0 pb-5">

            <hr style="background: white; justify-content-start">
                <div class="img-logo col align-self-start">
                    <img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo">
                </div>
                <!-- col -->
            </div>

            <!-- row -->


        </div>
        </div>
        <!-- container -->
        <hr style="background: white;">
    </section>

    <!-- Header -->


<section class="">
        <div class="container section-line">
            <div class="row align-items-start justify-content-center">
                <div class="col-lg-4">
                    <div>
                        <img class="align-self-start img-fluid d-block mx-auto img-responsive" src="resources/img/writing_03.jpg" alt="">
                    </div>
                </div>
                <div class="col-lg-8 mb-5">
                    <div>
                        <div style="text-align: center">
                            <h2 class="section-title mb-2 text-uppercase">Texting</h2>
                            <img class="mb-5" src="resources/img/linie.png" alt="">
                        </div>
                        <ul class="list-group ul-group">
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Ihnen die Worte fehlen.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Ihnen die entscheidenden Worte fehlen.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn bestehende Texte nicht begeistern.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn es um Emotionen geht.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Sie Emotionen wecken wollen.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Sie Ihre bevorstehende Ansprache sprachlos macht.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Ihre Worte tatenlos bleiben.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Sie mit Worten führen wollen.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Sie einen Grund zum Feiern haben.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Tränen fliessen und Worte helfen können.</li>
                        </ul>
                        <h4 class="mt-5 section-title2">Dann ist ROLLYWOOD für Sie da</h4>
                        <h5 class="mb-5 section-title2">weil Worte Menschen bewegen.</h5>
                        <p class="mb-5">
                            Das ausgewogene Wort im richtigen Moment kann Berge versetzen und Ihre Mitmenschen begeistern. Ob das Ihre Leser oder Ihre Zuhörer sind, Ihr Business- oder Ihr Familienumfeld ist, ob Sie was zum Feiern oder zum besinnlichen Nachdenken haben - das macht für uns hinsichtlich Anspruch und Notwendigkeit keinen Unterschied.
                        </p>
                        <div>
                            <blockquote>
                                <p class="mb-5">
                                    „Wir glauben an die Kraft des subtil gewählten Wortes. An die Wirkung und die Magie, die es in uns Menschen auslöst. Und uns bewegt.“
                                </p>
                            </blockquote>
                        </div>
                        <p>
                            mehr Info: <a href="mailto:words@rolimeyer.ch" target="_top">E-Mail</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>






    <!-- Scripts
  ============================================================================================= -->

    <!-- jQuery -->
    <script src="assets/js/jquery-3.2.1.min.js"></script>
    <!-- Popper -->
    <script src="assets/js/popper.min.js"></script>
    <!-- Bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Custom -->
    <script src="assets/js/custom.js"></script>

</body>

</html>





/* === Allgemein ===*/


/* Schriften */

body,
p {
    font-family: 'Spectral', serif;
    line-height: 1.8;
    font-size: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-alt {
font-family: 'Montserrat', sans-serif;
text-align: center; 

}


/* Hilfsklassen */

.d-relative {
    position: relative;
}

/* === Navigation ===*/

.navbar.navbar-dark button,
.navbar.navbar-dark button:focus,
.navbar.navbar-dark .nav-link {
    color: #fff;

}

.navbar {
    background-color: #2e82b0;
}

.navbar-dark {
    background-color: #2e82b0;
}



/* === Header ===*/



.hero-bg {
    background-color: #2e82b0;
}

.img-logo {
    max-width: 80%;
    margin-left:auto;
    margin-right:auto;
}

.jumbotron{
    height: 100vh;
}

/* === Section ===*/

.section-title {
    color: #ffae00;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 0.4em;  
}

.section-title2 {
    color: #ffae00;
    letter-spacing: 0.1em;  
}

.bg-section {
    background-color: #fff;
    align-items: center;
}

.section-line {
    border-bottom: 1px solid #2e82b0;
}

section p {
    text-align: justify;
    font-size: 1em;
}




.ul-group {
    border: 1px;
    margin-left: 2rem;
}
.list-group li{
  border: 0 none;
    text-indent: -2.0em;
}






footer,
footer>p,
.footer-d
{
    background-color:#2e82b0;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 0.9em;
}

.footer-text {
    font-size: 0.8em;
}

【问题讨论】：

标签： css html responsive-design bootstrap-4

【解决方案1】：

不要调整.row 的边距或最大宽度。 .row 有 negative margins for a reason。

【讨论】：

【解决方案2】：

引导行和列旨在协同工作。如果您使用自定义 css 更改其中一个部分，您几乎肯定会遇到这种情况下的问题。

所以，如果你添加这样的东西：

.row {
    max-width: 1140px;
    margin: 0 auto;
}

您正在删除需要存在的负边距。这会导致您看到的空白区域。

因此，您应该始终使用本机 Bootstrap 4 类来实现您在布局中需要的东西，而不是应用不必要的自定义 css，因为 Bootstrap 类允许您在不接触 css 的情况下完成几乎所有您需要的事情。

这是一篇解释 Bootstrap 网格如何在幕后工作的文章：

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

注意：尽管那篇文章讨论的是 Bootstrap 3，但所描述的原则也适用于 Bootstrap 4 网格。

【讨论】：

感谢四位您的意见。该链接非常有帮助。但它没有帮助，当我删除我的css文件中的 .row 时。我将洞 css 定义放在我的第一篇文章中，也许还有更多
你确定这是你所有的代码吗？如果是，这可能是浏览器缓存问题。创建一个全新的 HTML 文件，将所有内容粘贴进去，保存并检查问题是否仍然存在。
好吧，除了导航文本开始以 768px 宽度换行之外，我没有看到您最近的代码有任何其他问题。当然看不到那个空白。
顺便说一下，你有一堆无效的&nbsp。那应该是&nbsp;。更好的是，删除所有这些内容并用<span class="icon-pencil mr-3"></span> 或mr-4 或mr-* 和pr-* 的组合替换它们以实现所需的间距。
感谢您的所有投入！我将使用 .html 和 .css 的新文件再次尝试。希望它可以工作......干杯