页面右侧有奇怪的小白间距

Posted

技术标签:

【中文标题】页面右侧有奇怪的小白间距【英文标题】：Page has weird little white spacing on the right side 【发布时间】：2021-02-26 09:56:23 【问题描述】：

我的整个页面右侧有奇怪的白色间距，我不知道它来自哪里。 我试图重置填充和边距，但显然没有帮助。 这是我第一次使用 bootstrap，我猜它可能与它有关，但我似乎默认情况下 bootstrap 没有类似的东西，而且我使用的基本上都是 col-x 的东西。

style.css

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700");

html,
body 
  height: 100%;
  width: 100%;
  font-family: "Poppins", sans-serif;
  color: #222;
  padding: 0;
  margin: 0;


/*--Navigation--*/

.navbar 
  padding: 0.8rem;


.navbar-nav li 
  padding-right: 20px;


.nav-link 
  font-size: 1.1em !important;
  color: #f7f7f7;


.nav-link:hover 
  color: #f7f7f7;


.bg-blue 
  background-color: #12232e;

  border-bottom: 3px solid #007cc7;


.navbar-brand h1 
  color: #f7f7f7;


.navbar-brand h1:hover 
  color: #f7f7f7;
  text-decoration: none;


.navbar .navbar-nav .nav-link 
  position: relative;
  color: #f7f7f7;

.navbar .navbar-nav .nav-link::after 
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #f7f7f7;
  color: #f7f7f7;
  width: 0%;
  content: "";
  height: 3px;
  transition: all 0.5s;

.navbar .navbar-nav .nav-link:hover::after 
  width: 100%;
  color: #f7f7f7;


.navbar .navbar-nav .nav-link:active 
  width: 100%;
  color: #f7f7f7;


.nav-item 
  font-size: 130%;


.custom-toggler.navbar-toggler 
  border-color: rgb(247, 247, 247);


.navButton 
  float: right;
  width: 45%;
  height: 35%;


/*--Navigation--*/

/*--Slider--*/

.carousel-inner img 
  width: 100%;
  height: 100%;


.carousel-caption 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);


.carousel-caption h1 
  font-size: 500%;
  text-transform: uppercase;
  text-shadow: 1px 1px 10px #000;


.carousel-caption h3 
  font-size: 200%;
  font-weight: 500;
  text-shadow: 1px 1px 10px #000;
  padding-bottom: 1rem;


/*--Slider--*/

/*--Jumbotron/Welcome--*/

.lead 
  font-size: 145%;


/*--Jumbotron/Welcome--*/

/*--footer--*/

footer 
  background-color: #3f3f3f;
  color: #d5d5d5;
  padding-top: 2rem;

hr.light 
  border-top: 1px solid #d6d6d6;
  width: 75%;


/*--footer--*/

/*---Media Queries --*/
@media (max-width: 1162px) 
  .carousel-caption h1 
    font-size: 350%;
  

@media (max-width: 768px) 
  .carousel-caption 
    top: 45%;
  

  .carousel-caption h1 
    font-size: 250%;
  

  .carousel-caption h3 
    font-size: 140%;
    font-weight: 500;
    padding-bottom: 0.2rem;
  

  .carousel-caption .btn 
    font-size: 95%;
    padding: 8px 14px;
  

  .display-4 
    font-size: 200%;
  

  .navButton 
    float: right;
    width: 50%;
  

  .navbar-toggler 
    float: right;
  

@media (max-width: 576px) 
  .carousel-caption 
    font-size: 70%;
    top: 40%;
  

  .carousel-caption h1 
    font-size: 150%;
  

  .carousel-caption h3 
    font-size: 110%;
    font-weight: 500;
    padding-bottom: 0.2rem;
  

  .carousel-caption .btn 
    font-size: 90%;
    padding: 4px 8px;
  

  .nav-link 
    font-size: 60% !important;
  

  .navbar-toggler 
    float: right;
  
  .navButton 
    float: none;
    width: 100%;
  


/*---Firefox Bug Fix --*/
.carousel-item 
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;

/*--- Fixed Background Image --*/
figure 
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0 !important;

.fixed-wrap 
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

#fixed 
  background-image: url("img/mac.png");
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;

/*--- Bootstrap Padding Fix --*/
[class*="col-"] 
  padding: 1rem;


/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px)  ... 

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px)  ... 

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px)  ... 

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px)  ... 
*/

index.php

<?php
include_once('header.php');
?>
  <body>
    <!-- Navigation -->

    <nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
      <div class="container-fluid">
        <div class="row"  style="width: 100%; margin-left: 0px; margin-right: 0px; align-items:center;">
          <div class="col-md-4 col-xs-6">
          <a class="navbar-brand" href="#">
            <h1 class="display-4 d-none d-md-block">Petitions</h1>
          </a>
          </div>
          <div class="col-md-4 col-xs-6">
            <button
            class="navbar-toggler custom-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarResponsive"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#">Начало</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Цел на компанията</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">За компанията</a>
              </li>
            </ul>
          </div>
          </div>
          <div class="col-md-4 col-xs-6"> 
            <button type="button" data-toggle="modal" data-target="#modalLoginForm" class="btn btn-primary btn-lg navButton">
                Влизане
            </button>
            </div>
        </div>
      </div>
    </nav>
    <!-- Navigation -->

    <!-- Image Slider -->

    <div id="slides" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#slides" data-slide-to="0" class="active"></li>
        <li data-target="#slides" data-slide-to="1"></li>
        <li data-target="#slides" data-slide-to="2"></li>
      </ul>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="parent d-flex justify-content-center">
            <img src="img/background.png" />
          </div>
          <div class="carousel-caption">
            <h1 class="display-1">Против неравеноството си?</h1>
            <h3>Бъди промяната!</h3>
            <button type="button" class="btn btn-primary btn-lg">
              Виж петиции
            </button>
          </div>
        </div>
        <div class="carousel-item">
          <div class="parent d-flex justify-content-center">
            <img src="img/background2.png" />
          </div>
        </div>
        <div class="carousel-item">
          <div class="parent d-flex justify-content-center">
            <img src="img/background3.png" />
          </div>
        </div>
      </div>
    </div>

    <!--- Image Slider -->

    <!--- Modal -->

    <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <i class="fas fa-envelope prefix grey-text"></i>
          <input type="email" id="defaultForm-email" class="form-control validate">
          <label data-error="wrong" data-success="right" for="defaultForm-email">Имейл</label>
        </div>

        <div class="md-form mb-4">
          <i class="fas fa-lock prefix grey-text"></i>
          <input type="password" id="defaultForm-pass" class="form-control validate">
          <label data-error="wrong" data-success="right" for="defaultForm-pass">Парола</label>

          <div class="modal-footer d-flex justify-content-center">
        <button class="btn btn-default">Влизане</button>
      </div>
        </div>

      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button class="btn btn-default" data-toggle="modal" data-target="#modalRegisterForm">Регистрация</button>
      </div>
    </div>
  </div>
</div>

    <!--- Modal -->

    <!--- Register Modal -->

    <div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <i class="fas fa-user prefix grey-text"></i>
          <input type="text" id="orangeForm-name" class="form-control validate">
          <label data-error="wrong" data-success="right" for="orangeForm-name">Име</label>
        </div>
        <div class="md-form mb-5">
          <i class="fas fa-envelope prefix grey-text"></i>
          <input type="email" id="orangeForm-email" class="form-control validate">
          <label data-error="wrong" data-success="right" for="orangeForm-email">Имейл</label>
        </div>

        <div class="md-form mb-4">
          <i class="fas fa-lock prefix grey-text"></i>
          <input type="password" id="orangeForm-pass" class="form-control validate">
          <label data-error="wrong" data-success="right" for="orangeForm-pass">Паорла</label>
        </div>

      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button class="btn btn-deep-orange">Sign up</button>
      </div>
    </div>
  </div>
</div>

    <!--- Register Modal --> 

    <!--- Jumbotron -->

    <!--<div class="container-fluid">
      <div class="row jumbotron">
        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
          <p class="lead">
            A web hosting service allows individuals and organizations to make
            their website accessible via the World Wide Web.
          </p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
          <a href="#"
            ><button type="button" class="btn btn-outline-secondary btn-lg">
              Web Hosting
            </button></a
          >
        </div>
      </div>
    </div>-->

    <!--- Welcome Section -->

    <div class="container-fluid padding">
      <div class="row welcome text-center">
        <div class="col-12">
          <h1 class="display-4">Цел на компанията</h1>
        </div>
        <hr />
        <div class="col-12">
          <p class="lead">
            Нашата компания е създадена с цел постигане на положителна промяна в
            ежедневието и живота на хора, които са част от различни малцинства,
            възрастови групи, както и йерархични постове, живота на животни,
            както и на всекиго, който е неспособен да се бори за себе си.
          </p>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-3"></div>
      <div class="col-6"><hr class="my-4" /></div>
      <div class="col-3"></div>
    </div>

    <!--- Welcome Section #2 -->

    <div class="container-fluid padding">
      <div class="row welcome text-center">
        <div class="col-12">
          <h1 class="display-4">Повече за компанията</h1>
        </div>
        <hr />
        <div class="col-12">
          <p class="lead">
            Ние вярваме, че не само думите, но и делата са важни.
          </p>
        </div>
      </div>
    </div>

    <!--- Three Column Section -->

    <!--- Two Column Section -->

    <!--- Fixed background -->

    <!--- Emoji Section -->

    <!--- Meet the team -->

    <!--- Cards -->

    <!--- Two Column Section -->

    <!--- Connect -->

    <!--- Footer -->

  <?php
    include_once('footer.php');
  ?>
  </body>
</html>

header.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Petitions Site</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

页脚.php

<footer style="background-color:#12232e;">
      <div class="container-fluid">
        <div class="row text-center">
          <div class="col-md-4">
            <img src="img/w3newbie.png" />
            <hr class="light" />
            <p>555-555-5555</p>
            <p>email@myemail.com</p>
            <p>100 street Name</p>
            <p>City, State, 0000</p>
          </div>
          <div class="col-md-4">
            <hr class="light" />
            <h5>Our hours</h5>
            <hr class="light" />
            <p>Monday: 9am - 5pm</p>
            <p>Saturday: 10am - 4pm</p>
            <p>Sunday: closed</p>
          </div>
          <div class="col-md-4">
            <hr class="light" />
            <h5>Our hours</h5>
            <hr class="light" />
            <p>555-555-5555</p>
            <p>email@myemail.com</p>
            <p>100 street Name</p>
            <p>City, State, 0000</p>
          </div>
          <div class="col-12">
            <hr class="light" />
            <h5>&copy; petitions.bg</h5>
          </div>
        </div>
      </div>
    </footer>

【问题讨论】：

能否请您仅发布相关代码，以便我们尝试帮助您。 【参考方案1】：

我在CodePen 中重新创建了您的问题并检查了元素...

页面右侧的空间是由一个比其他所有元素都宽的元素创建的。 有一条来自_grid.scss 的CSS 规则用于.row。一个简单的解决方法是用!important 覆盖它，如下所示。

.row
  margin-left: 0 !important;
  margin-right: 0 !important;

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Petitions Site</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- Navigation -->

    <nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
      <div class="container-fluid">
        <div class="row" style="width: 100%; margin-left: 0px; margin-right: 0px; align-items:center;">
          <div class="col-md-4 col-xs-6">
            <a class="navbar-brand" href="#">
              <h1 class="display-4 d-none d-md-block">Petitions</h1>
            </a>
          </div>
          <div class="col-md-4 col-xs-6">
            <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                  <a class="nav-link" href="#">Начало</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Цел на компанията</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">За компанията</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-4 col-xs-6">
            <button type="button" data-toggle="modal" data-target="#modalLoginForm" class="btn btn-primary btn-lg navButton">
              Влизане
            </button>
          </div>
        </div>
      </div>
    </nav>
    <!-- Navigation -->

    <!-- Image Slider -->

    <div id="slides" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#slides" data-slide-to="0" class="active"></li>
        <li data-target="#slides" data-slide-to="1"></li>
        <li data-target="#slides" data-slide-to="2"></li>
      </ul>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="parent d-flex justify-content-center">
            <img src="img/background.png" />
          </div>
          <div class="carousel-caption">
            <h1 class="display-1">Против неравеноството си?</h1>
            <h3>Бъди промяната!</h3>
            <button type="button" class="btn btn-primary btn-lg">
              Виж петиции
            </button>
          </div>
        </div>
        <div class="carousel-item">
          <div class="parent d-flex justify-content-center">
            <img src="img/background2.png" />
          </div>
        </div>
        <div class="carousel-item">
          <div class="parent d-flex justify-content-center">
            <img src="img/background3.png" />
          </div>
        </div>
      </div>
    </div>

    <!--- Image Slider -->

    <!--- Modal -->

    <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header text-center">
            <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body mx-3">
            <div class="md-form mb-5">
              <i class="fas fa-envelope prefix grey-text"></i>
              <input type="email" id="defaultForm-email" class="form-control validate">
              <label data-error="wrong" data-success="right" for="defaultForm-email">Имейл</label>
            </div>

            <div class="md-form mb-4">
              <i class="fas fa-lock prefix grey-text"></i>
              <input type="password" id="defaultForm-pass" class="form-control validate">
              <label data-error="wrong" data-success="right" for="defaultForm-pass">Парола</label>

              <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-default">Влизане</button>
              </div>
            </div>

          </div>
          <div class="modal-footer d-flex justify-content-center">
            <button class="btn btn-default" data-toggle="modal" data-target="#modalRegisterForm">Регистрация</button>
          </div>
        </div>
      </div>
    </div>

    <!--- Modal -->

    <!--- Register Modal -->

    <div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header text-center">
            <h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body mx-3">
            <div class="md-form mb-5">
              <i class="fas fa-user prefix grey-text"></i>
              <input type="text" id="orangeForm-name" class="form-control validate">
              <label data-error="wrong" data-success="right" for="orangeForm-name">Име</label>
            </div>
            <div class="md-form mb-5">
              <i class="fas fa-envelope prefix grey-text"></i>
              <input type="email" id="orangeForm-email" class="form-control validate">
              <label data-error="wrong" data-success="right" for="orangeForm-email">Имейл</label>
            </div>

            <div class="md-form mb-4">
              <i class="fas fa-lock prefix grey-text"></i>
              <input type="password" id="orangeForm-pass" class="form-control validate">
              <label data-error="wrong" data-success="right" for="orangeForm-pass">Паорла</label>
            </div>

          </div>
          <div class="modal-footer d-flex justify-content-center">
            <button class="btn btn-deep-orange">Sign up</button>
          </div>
        </div>
      </div>
    </div>

    <!--- Register Modal -->

    <!--- Jumbotron -->

    <!--<div class="container-fluid">
      <div class="row jumbotron">
        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
          <p class="lead">
            A web hosting service allows individuals and organizations to make
            their website accessible via the World Wide Web.
          </p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
          <a href="#"
            ><button type="button" class="btn btn-outline-secondary btn-lg">
              Web Hosting
            </button></a
          >
        </div>
      </div>
    </div>-->

    <!--- Welcome Section -->

    <div class="container-fluid padding">
      <div class="row welcome text-center">
        <div class="col-12">
          <h1 class="display-4">Цел на компанията</h1>
        </div>
        <hr />
        <div class="col-12">
          <p class="lead">
            Нашата компания е създадена с цел постигане на положителна промяна в
            ежедневието и живота на хора, които са част от различни малцинства,
            възрастови групи, както и йерархични постове, живота на животни,
            както и на всекиго, който е неспособен да се бори за себе си.
          </p>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-3"></div>
      <div class="col-6">
        <hr class="my-4" />
      </div>
      <div class="col-3"></div>
    </div>

    <!--- Welcome Section #2 -->

    <div class="container-fluid padding">
      <div class="row welcome text-center">
        <div class="col-12">
          <h1 class="display-4">Повече за компанията</h1>
        </div>
        <hr />
        <div class="col-12">
          <p class="lead">
            Ние вярваме, че не само думите, но и делата са важни.
          </p>
        </div>
      </div>
    </div>

    <!--- Three Column Section -->

    <!--- Two Column Section -->

    <!--- Fixed background -->

    <!--- Emoji Section -->

    <!--- Meet the team -->

    <!--- Cards -->

    <!--- Two Column Section -->

    <!--- Connect -->

    <!--- Footer -->

    <footer style="background-color:#12232e;">
      <div class="container-fluid">
        <div class="row text-center">
          <div class="col-md-4">
            <img src="img/w3newbie.png" />
            <hr class="light" />
            <p>555-555-5555</p>
            <p>email@myemail.com</p>
            <p>100 street Name</p>
            <p>City, State, 0000</p>
          </div>
          <div class="col-md-4">
            <hr class="light" />
            <h5>Our hours</h5>
            <hr class="light" />
            <p>Monday: 9am - 5pm</p>
            <p>Saturday: 10am - 4pm</p>
            <p>Sunday: closed</p>
          </div>
          <div class="col-md-4">
            <hr class="light" />
            <h5>Our hours</h5>
            <hr class="light" />
            <p>555-555-5555</p>
            <p>email@myemail.com</p>
            <p>100 street Name</p>
            <p>City, State, 0000</p>
          </div>
          <div class="col-12">
            <hr class="light" />
            <h5>&copy; petitions.bg</h5>
          </div>
        </div>
      </div>
    </footer>

  </body>

【讨论】：

以上是关于页面右侧有奇怪的小白间距的主要内容，如果未能解决你的问题，请参考以下文章

xshell输入奇怪，空格间距变大

WebGL 纹理问题（奇怪的图形故障和映射问题）

小白学Java：奇怪的RandomAccess

垂直空间约束奇怪的行为

CSS：色块的奇怪边缘

iPhone上奇怪的黑色区域