无法让导航栏填充屏幕的宽度答案

【问题标题】：Cant get navbar to fill width of screen无法让导航栏填充屏幕的宽度
【发布时间】：2021-05-18 17:11:29
【问题描述】：

我已经尝试了几个小时来让我的导航栏填满屏幕的宽度，但我没有运气。我尝试将填充设置为 0，！重要，宽度 100%，但没有任何效果。任何帮助将不胜感激。

.carousel-item {
  height: 100vh;
  min-height: 300px;
}

.navbar-nav a {
  font-size: 18px;
}

.navbar-nav {
  text-align: center;
  background-color: #bfd9d7;
  width: 100%;
  padding: 0%;
}

.w-100 {
  height: 100vh;
}

<!doctype html>
<html lang="en">

<head>
  <title>Scot Living</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Furniture</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Dining</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Bedroom</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="carousel slide" data-ride="carousel" id="carouselExampleIndicators">
    <ol class="carousel-indicators">
      <li class="active" data-slide-to="0" data-target="#carouselExampleIndicators"></li>
      <li data-slide-to="1" data-target="#carouselExampleIndicators"></li>
      <li data-slide-to="2" data-target="#carouselExampleIndicators"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img alt="First slide" class="d-block w-100" src="Pictures/bedroom.jpg">
        <div class="carousel-caption d-none d-md-block">
          <h5 class="animated bounceInRight" style="animation-delay: 1s">Bedroom</h5>
          <p class="animated bounceInLeft" style="animation-delay: 2s">Bedroom Furniture</p>
          <p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Shop Bedroom</a></p>
        </div>
      </div>
      <div class="carousel-item">
        <img alt="Second slide" class="d-block w-100" src="Pictures/diningroom.jpg">
        <div class="carousel-caption d-none d-md-block">
          <h5 class="animated slideInDown" style="animation-delay: 1s">Dining Room</h5>
          <p class="animated fadeInUp" style="animation-delay: 2s">Dining room furniture</p>
          <p class="animated zoomIn" style="animation-delay: 3s"><a href="#">Shop Dining</a></p>
        </div>
      </div>
      <div class="carousel-item">
        <img alt="Third slide" class="d-block w-100" src="Pictures/carpet.jpg">
        <div class="carousel-caption d-none d-md-block">
          <h5 class="animated zoomIn" style="animation-delay: 1s">Flooring</h5>
          <p class="animated fadeInLeft" style="animation-delay: 2s">Wide range of flooring</p>
          <p class="animated zoomIn" style="animation-delay: 3s"><a href="#">Shop Flooring</a></p>
        </div>
      </div>
    </div><a class="carousel-control-prev" data-slide="prev" href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" data-slide="next"
      href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
  </div>

  <!-- Optional JavaScript -->
  <script type="text/javascript" src='script.js'>
  </script>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

我正在尝试让蓝色导航栏填充到两侧的屏幕边缘：

【问题讨论】：

你能把它做成代码 sn-p 吗？
很可能，导航在 INSIDE 内的包装器具有填充或边距设置。 .. 使用您的 DevTools，您会很快发现问题..

标签： html css twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

移除填充表单“导航栏”

.navbar {
  padding: 0;
}

【讨论】：

【解决方案2】：

通过p-0 类从<nav class="navbar navbar-expand-lg navbar-light fixed-top border "> 中删除填充。

变成：<nav class="navbar navbar-expand-lg navbar-light fixed-top border p-0">

旁注：w-100 已经是一个 bs4 类名，并将 width 设置为 100% ，不确定添加 height:100vh 是否是个好主意，请使用自定义样式的自定义类名；）。

【讨论】：

这行得通，但我试图让导航栏在顶部有一个间隙，所以它在页面下方和轮播顶部上方。但这解决了我的主要问题，非常感谢！！
@DanielRyan 然后您可以通过pt-2 添加一个填充顶部参见getbootstrap.com/docs/4.5/utilities/spacing
这解决了我所有的问题，传奇。谢谢。

【解决方案3】：

你有没有在 CSS 的顶部添加这段代码 sn-p

*{
    margin : 0;
    padding: 0;
}

【讨论】：

【解决方案4】：

将此添加到您的 CSS 代码中：

* {
 margin: 0;
 padding: 0;
}

当你添加了这个之后，一切都应该不再有那么远的距离了。

如果不起作用，请告诉我。

【讨论】：