Bootstrap4：屏幕右侧的多余空格

时间：2019-12-10 20:28:24

标签： css bootstrap-4 width navbar

我在页面顶部的导航栏在较小的设备上使视口溢出。我在个人设备和Chrome开发者工具中找到了这个。

从575像素开始，屏幕的白色面上有一个空格。随着视口的减小，空白空间反而增大。在最小的点上，含量约占25％，其余的75％为白色。

如何使多余的空白消失？谢谢！

< script src = "https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity = "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin = "anonymous" > < /script>

  <
  script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" > < /script>

  <
  script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity = "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin = "anonymous" > < /script>
body {
  position: relative;
}

h3 {
  text-align: center;
}

nav {
  position: inherit;
}

#home {
  background-image: url(jumbotronNewResized.jpg);
  text-align: center;
  margin-top: 55px;
  background-size: 100%;
  background-repeat: no-repeat;
}

#lowerJumbotron {
  color: white;
}

i {
  padding-right: 8px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link href="fontawesome-free-5.11.2-web/css/all.min.css" rel="stylesheet">
  <title>My App!</title>
</head>

<body data-spy="scroll" data-target="#topPageNavbar" data-offset="100">
  <nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top" id="topPageNavbar">
    <a class="navbar-brand font-weight-bold" href="#">My App Page</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar" aria-controls="topNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse" id="topNavbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#features">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#download">Download</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-xs-0">
        <input class="form-control mr-sm-2" type="email" placeholder="Email Address" aria-label="Email Address">

        <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">

        <button class="btn btn-outline-success bg-success my-2 my-sm-0 text-white font-weight-bold" type="submit">Login</button>
      </form>
    </div>
  </nav>
  <div class="jumbotron jumbotron-fluid" id="home">
    <div class="container">
      <h1 class="display-4">My Awesome App!</h1>
      <p class="lead">This is why YOU should download this fantastic app!</p>
      <hr class="my-2">
      <p id="lowerJumbotron">Want to keep updated? Join our mailing list!</p>
      <form>
        <div class="form-row justify-content-center">
          <div class="col-auto">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text">@</div>
              </div>
              <input type="email" class="form-control" placeholder="Your Email Address">
            </div>
          </div>
          <div class="col-auto">
            <button type="submit" class="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div id="about" class="container">
    <h3 class="my-3">This is all about the app!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <hr class="container">
  <div id="features" class="container mt-4">
    <h3 class="mb-3">Check out some of the different features!</h3>
    <div class="card-deck">
      <div class="card">
        <img src="seedsResized.jpg" class="card-img-top" alt="Seeds">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-seedling icon"></i>Gather Your Seed</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
      <div class="card">
        <img src="sprout.jpg" class="card-img-top" alt="Sprouting Seeds">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-leaf icon"></i>Nuture Your Field</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
      <div class="card">
        <img src="harvestResized.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-tractor icon"></i>Receive Your Harvest</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
    </div>
    <div class="card-deck mt-4">
      <div class="card">
        <img src="calendar.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-tasks"></i>Plan Your Activity</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
      <div class="card">
        <img src="meetingResized.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-handshake"></i>Schedule Your Success</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
      <div class="card">
        <img src="dashboardResized.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-chart-line"></i>Monitor Your Growth</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
    </div>
  </div>
  <div id="download"></div>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

Link of the Website With Extra Whitespace On Small Screens

1 个答案:

答案 0 :(得分：0)

与导航无关，问题在于水平标尺<hr>的宽度为100％；添加以下CSS来解决：

hr.container {
    width: auto;
}

完整的工作片段：

body {
  position: relative;
}

h3 {
  text-align: center;
}

nav {
  position: inherit;
}

#home {
  background-image: url(jumbotronNewResized.jpg);
  text-align: center;
  margin-top: 55px;
  background-size: 100%;
  background-repeat: no-repeat;
}

#lowerJumbotron {
  color: white;
}

i {
  padding-right: 8px;
}

hr.container {
  width: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="fontawesome-free-5.11.2-web/css/all.min.css" rel="stylesheet">


<body data-spy="scroll" data-target="#topPageNavbar" data-offset="100">
  <nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top" id="topPageNavbar">
    <a class="navbar-brand font-weight-bold" href="#">My App Page</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar" aria-controls="topNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse" id="topNavbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#features">Features</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#download">Download</a>
        </li>
      </ul>

      <form class="form-inline my-2 my-xs-0">
        <input class="form-control mr-sm-2" type="email" placeholder="Email Address" aria-label="Email Address">
        <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
        <button class="btn btn-outline-success bg-success my-2 my-sm-0 text-white font-weight-bold" type="submit">Login</button>
      </form>
    </div>
  </nav>

  <div class="jumbotron jumbotron-fluid" id="home">
    <div class="container">
      <h1 class="display-4">My Awesome App!</h1>
      <p class="lead">This is why YOU should download this fantastic app!</p>
      <hr class="my-2">
      <p id="lowerJumbotron">Want to keep updated? Join our mailing list!</p>
      <form>
        <div class="form-row justify-content-center">
          <div class="col-auto">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text">@</div>
              </div>
              <input type="email" class="form-control" placeholder="Your Email Address">
            </div>
          </div>
          <div class="col-auto">
            <button type="submit" class="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div id="about" class="container">
    <h3 class="my-3">This is all about the app!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <br>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </div>
  <hr class="container">
  <div id="features" class="container mt-4">
    <h3 class="mb-3">Check out some of the different features!</h3>
    <div class="card-deck">
      <div class="card">
        <img src="seedsResized.jpg" class="card-img-top" alt="Seeds">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-seedling icon"></i>Gather Your Seed</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
      <div class="card">
        <img src="sprout.jpg" class="card-img-top" alt="Sprouting Seeds">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-leaf icon"></i>Nuture Your Field</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
      <div class="card">
        <img src="harvestResized.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-tractor icon"></i>Receive Your Harvest</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
    </div>
    <div class="card-deck mt-4">
      <div class="card">
        <img src="calendar.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-tasks"></i>Plan Your Activity</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
      <div class="card">
        <img src="meetingResized.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-handshake"></i>Schedule Your Success</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
      <div class="card">
        <img src="dashboardResized.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-chart-line"></i>Monitor Your Growth</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" class="btn btn-success text-wrap">Click This Link!</a>
        </div>
      </div>
    </div>
  </div>
  <div id="download"></div>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

相关问题
最新问题