小型设备在机身右侧的空间

时间：2019-11-01 18:13:00

标签： html css bootstrap-4

使用Bootstrap时，我的网站出现问题。一切运行良好，直到我尝试查看我的网站是否响应良好。看起来我的身体上有一个白色的正确空间，但仅在网站的特定部分上。当我在页面中间滚动时，一切都很棒。

我尝试将css overflow-x: hidden放在CSS上，但这不能解决问题。

编辑：：您可以在这里查看我的网站：https://www.simpledecours.web-edu.fr/site/，也可以在此处看到代码。

这是我的html：

<!doctype html>
<html lang="fr">

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

    <!-- Bootstrap CSS -->
    <link rel="shortcut icon" href="icons/eye.png">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="titleCss.css">
    <title>Coucou</title>
</head>

<body>
    <div class="container-fluid">
    <nav class="navbar fixed-top navbar-expand-md navbar-light">
        <a class="navbar-brand" href="#home"><img src="icons/eyeWhite.png" style="max-width: 30px;"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#lesServices">NOS SERVICES <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#lesValeurs">NOS VALEURS <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#leContact">CONTACT <span class="sr-only">(current)</span></a>
                </li>
            </ul>
        </div>
    </nav>
</div>


    <div class="container-fluid" id="home">
        <div class="row align-items-center" id="rowHome">
            <div class="col-md-12" id="textHome">
                <h1>Solution digitale pour&nbsp;<a class="typewrite" data-period="2000" data-type='[ "entrepreneurs", "créateurs", "vous." ]'></a></h1>
                <a href="#titreServices"><button type="button" class="btn top-buffer">En savoir plus</button></a>
            </div>
        </div>
    </div>


    <div class="container-fluid" id="lesServices">
        <div class="row align-items-center" id="rowServices">
            <div class="col-md-12" id="titreServices">
                <p class="subtitle fancy"><span>NOS SERVICES</span></p>
            </div>
        </div>
        <div class="row align-items-center" id="services" data-aos="fade-up">
            <div class="col-md-4" id="web">
                <div class="containsTextWeb">
                    <img src="icons/monitorBlue.png" style="max-width: 30%">
                    <h2 class="titreService"><b>SITE VITRINE</b></h2>
                    <hr class="hrServices">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan, nec venenatis ipsum efficitur. Aenean a egestas est. Suspendisse neque mauris, tempus a tortor eu, pharetra viverra ipsum.</p>
                </div>
            </div>
            <div class="col-md-4" id="social">
                <div class="containsTextSocial">
                    <img src="icons/digital-campaignBlue.png" style="max-width: 30%">
                    <h2 class="titreService"><b>RESEAUX SOCIAUX</b></h2>
                    <hr class="hrServices">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan, nec venenatis ipsum efficitur. Aenean a egestas est. Suspendisse neque mauris, tempus a tortor eu, pharetra viverra ipsum.</p>
                </div>
            </div>
            <div class="col-md-4" id="maintenance">
                <div class="containsTextMaintenance">
                    <img src="icons/dataBlue.png" style="max-width: 30%">
                    <h2 class="titreService"><b>MAINTENANCE</b></h2>
                    <hr class="hrServices">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan, nec venenatis ipsum efficitur. Aenean a egestas est. Suspendisse neque mauris, tempus a tortor eu, pharetra viverra ipsum.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid" id="lesValeurs">
        <div class="row align-items-center" id="rowValeurs">
            <div class="col-md-12" id="titreValeurs">
                <p class="subtitle fancy"><span>NOS VALEURS</span></p>
            </div>
        </div>
        <div class="row align-items-center" id="valeursHaut" data-aos="fade-left">
            <div class="col-md-4" id="icone1">
                <div class="containsTexteIcone1">
                    <img src="icons/graphicBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">RESULTAT</h2>
                    <hr class="hrValeurs">
                    <p>Consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
            <div class="col-md-4" id="icone2">
                <div class="containsTexteIcone2">
                    <img src="icons/likeBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">VISIBILITE</h2>
                    <hr class="hrValeurs">
                    <p>Dolor sit amet, consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
            <div class="col-md-4" id="icone3">
                <div class="containsTexteIcone3">
                    <img src="icons/supportBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">DISPONIBILITE</h2>
                    <hr class="hrValeurs">
                    <p>Consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
        </div>
        <div class="row align-items-center" id="valeursBas" data-aos="fade-right">
            <div class="col-md-4" id="icone4">
                <div class="containsTexteIcone4">
                    <img src="icons/supportBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">CONCENTREZ VOUS SUR VOTRE METIER</h2>
                    <hr class="hrValeurs">
                    <p>Consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
            <div class="col-md-4" id="icone5">
                <div class="containsTexteIcone5">
                    <img src="icons/graphicBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">A L'ECOUTE</h2>
                    <hr class="hrValeurs">
                    <p>Consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
            <div class="col-md-4" id="icone6">
                <div class="containsTexteIcone6">
                    <img src="icons/likeBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">PROCHE DE VOUS</h2>
                    <hr class="hrValeurs">
                    <p>Consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
        </div>
    </div>




    <div class="container-fluid" id="leContact">
        <div class="row align-items-center" id="contact">
            <div class="col-md-8 align-items-center" id="labelContact">
                <p>Vous avez besoin de plus d'informations ? Contactez nous pour faire un devis gratuit !</p>
            </div>
            <div class="col-md-4" id="formContact">
                <a href="contact.html"><button type="button" class="btn btnContact">Contact</button></a>
            </div>
        </div>
    </div>




    <footer>
        <div class="container-fluid" id="footer">
            <div class="row align-items-center">
                <div class="col-md-12" id="arrowFooter">
                    <a href="#home"><img src="icons/navigate-up-arrowWhite.png" style="max-width: 40px;"></a>
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-md-6" id="autreFooter">
                    <h1><a href="#home"><u>NomEntreprise</u></a></h1>
                    <ul class="listeFooter">
                        <li><a href="#services">Nos services</a></li>
                        <li><a href="#valeurs">Nos valeurs</a></li>
                        <li><a href="contact.html">Nous contacter</a></li>
                    </ul>
                </div>
                <div class="col-md-6" id="contactFooter">
                    <h1><u>Autres contacts : </u></h1>
                    <div class="tel">
                        <img src="icons/telephoneWhite.png" style="max-width: 20px;">
                        <p>+33 5 49 52 32 17</p>
                    </div>
                    <div class="mail">
                        <img src="icons/emailWhite.png" style="max-width: 20px;">
                        <p>contact@maildetest.com</p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-md-12" id="socialMediaFooter">
                    <a href="#"><img src="icons/facebook.png" style="max-width: 40px;"></a>
                    <a href="#"><img src="icons/twitter.png" style="max-width: 40px;"></a>
                </div>
            </div>
            <div class="row" id="rowCopyright">
                <div class="col-md-12" id="copyAndMentionsLegales">
                    <p id="text">Copyright ©</p>
                    <p id="date">
                        <script>
                            var d = new Date();
                            var annee = d.getFullYear();
                            document.getElementById("date").innerHTML = annee;

                        </script>
                        All right reserved | <a href="#mentionlegales"><u>Mentions Légales</u></a> | Icons made by <a href="https://www.flaticon.com/authors/prettycons" title="prettycons">prettycons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="typewritter.js"></script>
    <script src="navbar_anim.js"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init({
            duration: 1600,
        });

    </script>
</body>

</html>

这是我的CSS：

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: Roboto, sans-serif;
    background-color: rgba(102, 102, 102, 0.12);
}

.navbar {
    background-color: transparent;
    transition: 0.5s;
    font-size: 12px;
}

.navbar.scrolled {
    background-color: #fff;
    color: #007bff;
    transition: 0.5s;
    box-shadow: 3px 2px 1px 1px rgba(102, 102, 102, .2);
}

#navbarSupportedContent li a {
    color: #fff;
}

.navbar.scrolled #navbarSupportedContent li a {
    color: #007bff;
}

#home {
    height: auto;
    background-color: #007bff;
    color: #fff;
}

#rowHome {
    height: 675px;
}

#textHome {
    text-align: center;
}

.btn {
    color: #fff;
    border-color: #fff;
}

.btn:hover {
    background-color: #fff;
    color: #007bff;
}

.top-buffer {
    margin-top: 1%;
}

#rowServices {
    margin-top: 3%;
}

#services {
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    height: auto;
    margin-top: 2%;
    margin-bottom: 5%;
}

#web h2,
#social h2,
#maintenance h2 {
    margin-top: 5%;
    color: rgba(102, 102, 102);
    font-size: 20px;
}

.col-md-4 .titreValeurs {
    margin-top: 5%;
    color: rgba(102, 102, 102);
    font-size: 15px;
}

.containsTextMaintenance p,
.containsTextSocial p,
.containsTextWeb p {
    margin-top: 5%;
    color: #666666;
}

#lesValeurs {
    width: 100%;
    background-color: #fff;
}

#valeursHaut,
#valeursBas {
    text-align: center;
    width: 100%;
    margin-top: 2%;
    margin-left: 0px;
    margin-right: 0px;
}

#valeursHaut h2,
#valeursBas h2 {
    font-size: 16px;
    color: #666666;
}

#valeursHaut p,
#valeursBas p {
    color: #666666;
    font-size: 13px;
}

#icone1,
#icone2,
#icone3,
#icone4,
#icone5,
#icone6 {
    height: 200px;
}



.hrServices {
    width: 18%;
    border: 1px solid rgba(102, 102, 102, 0.75)
}

.hrValeurs {
    width: 20%;
}

#contact {
    text-align: center;
    height: 150px;
    background-color: #007bff;
}

#labelContact {
    color: #fff;
    font-size: 20px;
}

.btnContact {
    padding: 6px 32px 6px 32px;
}

#footer {
    background-color: #00448e;
}

#text,
#date {
    color: #fff;
    display: inline-block;
    font-size: 12px;
}

.tel img,
.tel p {
    display: inline-block;
    color: #fff;
    font-size: 14px;
}

.tel,
.mail {
    padding-left: 10%;
}

.listeFooter {
    padding-left: 10%;
}

.mail img,
.mail p {
    display: inline-block;
    color: #fff;
    font-size: 14px;
}

#arrowFooter {
    text-align: center;
}

#footer h1 {
    text-align: center;
    font-size: 20px;
    color: #fff;
}

#socialMediaFooter {
    text-align: center;
}

#footer a {
    text-decoration: none;
    color: #fff;

}

#footer ul {
    list-style: none;
    font-size: 14px;
}

1 个答案:

答案 0 :(得分：1)

这是由于 aos fade-left的作用。它为动画保留了额外的像素。您可以通过css将!important标记为自己的溢出样式来覆盖其行为（如果淡左键对您不重要，则可以选择其他效果。）

相关问题
最新问题