css - 移动 View 中右侧大屏幕中的空白区域

标签 css html responsive-design bootstrap-4

我发现了很多关于此的信息，但没有任何东西真正帮助我找出问题所在。有问题的空白如下所示:

WhiteSpace

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

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

    <!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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bec9d1ccdacdfeccd1d2d7d3dbc7dbcc90ddd6" rel="noreferrer noopener nofollow">[email protected]</a>" 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;
}

最佳答案

Bootstrap 行和列旨在协同工作。如果您使用自定义 CSS 更改这些部分之一，您几乎肯定会遇到像本例这样的问题。

所以，如果你添加这样的内容:

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

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

因此，您应该始终使用 native 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 - 移动 View 中右侧大屏幕中的空白区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49007724/

上一篇：reactjs - 使用 React 的 Webpack 4 配置

下一篇：list - 如何使用列表删除函数中的重复元素？

相关文章：

html - 在 IE 中滚动 HTML 5 Canvas

html - 具有 33.3% 宽度的 Flexbox 获得空白

jquery - 如何阻止框架在悬停时改变元素的颜色？

javascript - 如果初始源不可用，则从其他源加载 JavaScript 和 CSS

css - 使用CSS更改移动 View 中元素的顺序

html - HTML 和 CSS 中的背景水印未根据前景内容正确对齐

html - 使用 Bulma CSS 将卡片居中

jquery - 如何使图像的 x 和 y 翻转，就像带有句柄的 Jquery 可调整大小的 UI 一样......？

javascript - 使用 spring MVC 将动态数据添加到可搜索的多选 jquery

html - Firefox 14.0.1 - Windows - 字体不工作 - 错误的 URI 或不允许跨站点访问错误

©2024 IT工具网  联系我们