Bootstrap 为什么我的页面右侧有一个白条

Question

我试图让我的 bootstrap 登陆页面响应所有显示，所以我开始使用媒体查询来适应 iPhone、iPad 和其他设备上的页面，但是当我使用 phone 时，网页右侧有一个白色条，整个模板也像缩小一样显示，右侧白色条上有一些 h1 标签。我会向您展示我的代码，希望有人能帮助我，我整天都被困在这里。我需要帮助。我是前端开发的新手，所以请不要吝啬给我一些建议。

<template>
   <div class="container-fluid m-0 p-0">
      <nav class="navbar navbar-expand-lg navbar-custom">
         <a class="navbar-brand " href="http://exaple.com/">
         <img src="../assets/logo.png" width="40" height="40" class="d-inline-block align-top" alt="">
         example.com
         </a>
         <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mr-auto">
               <li class="nav-item active">
                  <a class="nav-link" href="#sigUP" style="color:white;">Signin</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#mission" style="color:white;">Mission</a>
               </li>
            </ul>
         </div>
      </nav>
      <div id="home-page" class="full-height p-4">
         <div class="container pt-500">
            <div class="row pb-6 pt-20">
               <div class="col-lg-6  my-auto ">
                  <div class="text-right text-down mb-3 d-block d-lg-none">
                     <h1 class ="text-color text-right text-down">Hello,</h1>
                     <h1 class="display-1 text-color text-right text-down">Betatester!</h1>
                  </div>
               </div>
               <div class="col-lg-6 my-auto pt-6">
                  <div class="text-right text-down mb-3 d-none d-lg-block">
                     <h1 class ="text-color text-right text-down">Hello,</h1>
                     <h1 class="display-1 text-color text-right text-down" >Betatester!</h1>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div id="about" class="bg-light p-3 p-md-5">
       <div class="container-fluid">
         <h1 class="display-1 text-color-about text-center"  >example.com is </h1>
         <div class="row">
            <div class="col-lg">
               <h1 class="ml-md-4 mr-md-4 text-left" >
                  the socialnetwork for you
               </h1>
               <h1 class="ml-md-4 mr-md-4 text-left text-color-about_p" >Freetime</h1>
               <img src="../assets/exam1.png" height="100">
               <img src="../assets/exam1.png" height="100">
               <img src="../assets/exam1.png" height="100">
            </div>
            <div class="col-lg">
               <img src="../assets/about.png" height="300" class="m-4">
            </div>
         </div>
        </div>
      </div>
      <div id="marketplace" class=" p-4">
       <div class="container-fluid">
         <div class="row">
            <div class="col-lg">
               <img src="../assets/marketplace.png" height="400">
            </div>
            <div class="col-lg">
               <h1 class="ml-md-4 mr-md-4 text-right" >
                  <h1 class="ml-md-4 mr-md-4 text-right text-color-about_m" >MARKETPLACE</h1>
                  where you can find all you need
               </h1>
            </div>
         </div>
        </div>
      </div>
      <div id="shops" class=" p-4">
       <div class="container-fluid">
         <div class="row">
            <div class="col-lg">
               <h1 class="ml-md-4 mr-md-4 text-left" >
                  the place where you can contact your
                  <h1 class="ml-md-4 mr-md-4 text-left text-color-about_s p-4" >FAVORITE </h1>
                  <h1 class="ml-md-4 mr-md-4 text-left text-color-about_p" >STORE</h1>
               </h1>
            </div>
            <div class="col-lg">
               <img src="../assets/shop.png" height="400">
            </div>
         </div>
        </div>
      </div>
      <div id="comp" class=" p-4">
       <div class="container-fluid">
         <div class="row">
            <div class="col-lg">
               <img src="../assets/comp.png" height="400">
            </div>
            <div class="col-lg">
               <h1 class="ml-md-4 mr-md-4 text-right" >
                  be
                  <h1 class="ml-md-4 mr-md-4 text-right text-color-about_m" >COMPETITIVE</h1>
                  blablablablablablablalbalba
               </h1>
            </div>
         </div>
        </div>
      </div>
      <div id="mission" class=" p-4">
       <div class="container-fluid">
         <div class="row">
            <div class="col-lg">
               <h1 class="ml-md-4 mr-md-4 text-left" style="display: inline-block" >
                  the 
                  <h1 class="ml-md-4 mr-md-4 text-left text-color-about_s" style="display: inline-block" > MISSION </h1>
               </h1>
               <h3 class="ml-md-4 mr-md-4 text-left">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dolor neque. Vivamus id ultrices nunc. Proin vulputate iaculis tortor ac rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in lobortis diam, eu ullamcorper ante. Pellentesque sodales felis sit amet metus laoreet sodales. Proin auctor nulla vitae porta pretium. Nullam tempor blandit sem vitae finibus.
               </h3>
            </div>
            <div class="col-lg">
               <img src="../assets/mission.png" height="400">
            </div>
         </div>
        </div>
      </div>
      <div id="betatest" class=" p-3">
       <div class="container-fluid">
         <div class="row justify-content-center">
            <div class="col-lg">
            </div>
            <h1 class="ml-md-0 mr-md-0   text-center display-1">
               Why you'll be 
               <h1 class="ml-md-4 mr-md-4 text-center  text-color-about_b display-1">
                  Betatester?
               </h1>
            </h1>
         </div>
         <div class="row ">
            <div class="col-lg">
               <h1 class="ml-md-4 mr-md-4 text-center" style="font-size: 4em;">
                  be
                  <h1 class="ml-md-4 mr-md-4 text-center" style="display: inline-block; color:white;font-size: 4em;font-size: 1.2em">BETATESTER</h1>
                  helps us to make the best experience possible on example.com
               </h1>
            </div>
         </div>
        </div>
      </div>
      <div id="sigUP" class=" p-2">
       <div class="container-fluid">
         <div class="row justify-content-center pd-8">
            <div class="col-lg pd-8">
               <h1 class="ml-md-4 mr-md-4 text-center display-2">
                  Become
                  <h1 class="ml-md-4 mr-md-4 text-center text-color-about_sn display-4">
                     a BETATESTER
                  </h1>
               </h1>
            </div>
         </div>
         <div class="row justify-content-center pd-8">
            <div class="col-lg ">
               <img src="../assets/player.png">
               <div class="row justify-content-center pd-8">
                  <div class="col-lg ">
                     <a href="/#/signupPlayer" class="btn btn-primary btn-lg btn-custom align-self-end" role="button">Player</a>
                  </div>
               </div>
            </div>
            <div class="col-lg ">
               <img src="../assets/store.png">
               <div class="row justify-content-center pd-8">
                  <div class="col-lg ">
                     <a href="/#/signupStore" class="btn btn-primary btn-lg btn-customS " role="button">Store</a>
                  </div>
               </div>
            </div>
         </div>
        </div>
      </div>
      <div id="contact" class="p-5">
       <div class="container-fluid">
         <div class="row justify-content-center mt-3 mb-3">
            <div v-if="show_contact == true" class="col-lg-4" style="color:white">
               <h2>Hai una domanda?</h2>
               <p>Contact us!</p>
               <div v-if="contact_notice != ''" class="alert alert-warning">
                  there's a problem. {{contact_notice}}
               </div>
               <form @submit.prevent="sendContactMessage()">
                  <div class="form-group text-left ">
                     <input v-model="contact_email"
                        type="email"
                        class="form-control"
                        placeholder="............"
                        >
                     <textarea v-model="contact_message"
                        class="form-control mt-3"
                        placeholder="..........."
                        rows="5"
                        ></textarea>
                  </div>
                  <button type="submit" class="btn btn-primary">send</button>
               </form>
            </div>
            <div v-else>
               <h3>mail sent correctly!</h3>
               <p>thanks for contact us!.</p>
            </div>
         </div>
        </div>
      </div>
      <div id="footer" class=" p-4">
         <footer class="text-light p-4">
            <small>&copy; 2020,example</small>
         </footer>
      </div>
   </div>
</template>
<style scoped>
   #home-page {
   background-color: #ff9e0b;
   background: url('../assets/bg_mt.jpg') no-repeat center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   }
   #about {
   min-height: 40vh;
   }
   #contact {
   background-color: #252223;
   }
   #marketplace {
   background-color: #ff9e0b;
   }
   #comp {
   background-color: #ff9e0b;
   }
   #footer {
   background-color: #252223;
   }
   #betatest {
   background-color: #ff9e0b;
   }
   .navbar-custom { 
   background-color:  #ff9e0b; 
   } 
   /* Modify brand and text color */ 
   .navbar-custom .navbar-brand, 
   .navbar-custom .navbar-text { 
   color: white !important;
   font-size: 1.5em !important; 
   }
   .text-color{
   color:white;
   font-family: 'Mountserrat',sans-serif;
   font-weight: 600;
   }
   .text-color-about{
   color:#ff9e0b;
   font-family: 'Mountserrat',sans-serif;
   font-weight: 600;
   }
   .text-color-about_p{
   color:#ff9e0b;
   font-family: 'Mountserrat',sans-serif;
   font-weight: 800;
   font-size: 4em !important;
   }
   .text-color-about_s{
   color:#ff9e0b;
   font-family: 'Mountserrat',sans-serif;
   font-weight: 800;
   font-size: 3em !important;
   }
   .text-color-about_m{
   color: white;
   font-family: 'Mountserrat',sans-serif;
   font-weight: 600;
   font-size: 3em !important;
   }
   .text-color-about_b{
   color:white;
   font-family: 'Mountserrat',sans-serif;
   align-self: center;
   font-weight: 800;
   font-size: 2em !important;
   }
   .text-color-about_sn{
   color:#ff9e0b;
   font-family: 'Mountserrat',sans-serif;
   align-self: center;
   font-weight: 800;
   font-size: 1em !important;
   }
   .bg-primary{
   color:#ff9e0b;
   }
   .bg-imgPlayer{
   contain: url(../assets/store-02.png);
   }
   .btn-customS{
   border-radius: 1rem;
   background-color: #f23838 !important;
   }
   .btn-custom{
   border-radius: 1rem;
   background-color: #ff9e0b !important;
   }
   @media (max-width: 576px) { 
   .navbar-custom {
   width:1152px; /* .... */
   }
   .navbar-custom {
   width:1152px; /* .... */
   }
   .about {
   width:1152px; /* .... */
   }
   .home-page {
   width:1152px; /* .... */
   }
   ....
   }
@media (max-width: 375px) { 
.navbar-custom {
         width: 375px;
        
}
.about {
          width:375px; /* .... */
}
.home-page {
          width:375px; /* .... */
}
.marketplace {
          width:375px; /* .... */
}
.shop {
          width:375px; /* .... */
}
.comp {
          width:375px; /* .... */
}
.mission {
          width:375px; /* .... */
}
.betatest {
          width:375px; /* .... */
}
.sigUP {
          width:375px; /* .... */
}
.contact {
          width:375px; /* .... */
}
.footer {
          width:375px; /* .... */
}
}
</style>

Answer 1

一个或多个元素在右侧溢出。 2 个选项

您可以使用 DevTools 找到错误的元素并修复其宽度或其他行为（填充等）；或者
您可以消除问题并将 overflow-x 设置为隐藏，希望没有其他问题发生 [您可以设置 overflow-x:hidden 仅适用于手机]

Answer 2

与手动设置每个断点的字体大小不同，Bootstrap 4.3+ 引入了一项名为 Responsive Font Sizes.

的新功能

按照说明开启就可以了，这样就不用写那么多媒体查询了。事实上，我强烈建议您学习 SASS/SCSS, if you're new to it. You can customize Bootstrap so much easier with SASS/SCSS. There is a whole section on theming 文档。

此外，您永远不需要 Bootstrap:

的嵌套容器

<!-- <div class="container-fluid m-0 p-0"> -->
    <nav class="navbar navbar-expand-lg navbar-custom">
        ...
    </nav>
    <div id="home-page" class="full-height p-4">
        <div class="container pt-500">...</div>
    </div>
        ...
    <div id="footer" class=" p-4">
        ...
    </div>
<!-- </div> -->

我只是觉得您的代码中有很多地方可以清理/改进。

Bootstrap 为什么我的页面右侧有一个白条

Bootstrap why my page has a white bar in right side of my page

html

css

responsive-design

bootstrap-4

responsive