css - Bootstrap 4 : Extra whitespace on right side of the screen

标签 css bootstrap-4 width navbar

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

从 575px 开始，屏幕的白色一侧有一个空白。随着视口(viewport)的减少，空白会反向增加。在最小的点上，含量约占 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

最佳答案

这与导航无关，问题在于水平标尺<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>

关于css - Bootstrap 4 : Extra whitespace on right side of the screen，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59274876/

上一篇：html - 图像的 Bootstrap 列不会内联

下一篇：html - Angular Material 中相互垂直的位置复选框

相关文章：

html - 固定位置标题栏问题

css - 如何对齐 CSS 输入类型文本占位符图像

html - Bootstrap 4 Grid 系统的问题

html - 如何在 img 链接悬停时显示文字？

android - 从右侧或左侧增加 LinearLayout 宽度

html - 为什么内联元素的顶部边框会溢出？为什么不左边框？

html - 砖石/马赛克风格图像网格 - 尺寸、间距问题

javascript - 将文本数组转换为下拉项？

html - 带圆 Angular 的 IE6 收缩包装

html - IE 中的 CSS inline-block 和 width-auto 不正确

©2024 IT工具网  联系我们