Bootstrap почему на моей странице есть белая полоса в правой части моей страницы

ProgramBox

Bootstrap почему на моей странице есть белая полоса в правой части моей страницы

Post author:admin
Запись опубликована:25 февраля, 2023
Post category:Вопросы по программированию

#html #css #bootstrap-4 #responsive-design #responsive

#HTML #css #bootstrap-4 #адаптивный дизайн #отзывчивый

Вопрос:

Я пытаюсь сделать свою целевую страницу bootstrap адаптивной для всех дисплеев, поэтому я начал использовать медиа-запросы, чтобы соответствовать странице на iPhone, iPad и других устройствах, но когда я использую телефон, справа от веб-страницы была белая полоса, и весь шаблон отображался как увеличенныйout и некоторые теги 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>amp;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>

1. пожалуйста, разместите изображение и код, в котором, по вашему мнению, возникает проблема?

2. Я добавил изображение и стрелками указал, где находится полоса.

3. один или несколько элементов переполнены справа. два варианта. вы можете использовать DevTools, чтобы найти неисправные элементы и исправить их ширину или другое поведение (заполнение и т. Д.) ИЛИ вы можете отключить проблему и установить overflow-x на скрытый и надеяться, что больше ничего не сломается 🙂 [вы можете установить overflow-x: hidden только для телефонов, кстати …]

4. Спасибо, авиа, ты спас мой день 🙂

5. @Loki00 рад, что смог помочь! Не стесняйтесь отмечать мой ответ как принятый, если это помогло. Приветствия

Ответ №1:

Один или несколько элементов переполнены справа. 2 варианта

вы можете использовать DevTools, чтобы найти неисправные элементы и исправить их ширину или другое поведение (заполнение и т. Д.); Или
Вы можете отключить проблему и установить overflow-x в скрытое и надеяться, что больше ничего не сломается [вы можете установить overflow-x: hidden только для телефонов]

Ответ №2:

Вместо ручной настройки размера шрифта для каждой точки останова, в Bootstrap 4.3 появилась новая функция, называемая адаптивными размерами шрифта.

Вы можете следовать инструкции, чтобы включить ее, тогда вам не нужно писать так много медиа-запросов. На самом деле, я бы настоятельно рекомендовал вам изучить SASS / SCSS, если вы новичок в этом. Вы можете настроить Bootstrap намного проще с помощью SASS / SCSS. В документации есть целый раздел о тематизации.

Кроме того, вам никогда не понадобятся вложенные контейнеры с 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> -->

Я просто чувствую, что есть много мест, которые вы можете очистить / улучшить в своем коде.

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

Получение ошибки «cant_update_message» при обновлении сообщений, отправленных ботом

Как мне закодировать метод сопоставления условий в свою программу?

Использование getInitialProps выдает ошибку типа: не удается прочитать свойство ‘map’ неопределенного