Question

我已经尝试了几个小时让我的导航栏填满屏幕的宽度，但我没有运气。我试过将填充设置为 0, !important, width 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>

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

Answer 1

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

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

旁注：w-100 已经是一个 bs4 类名并将 width 设置为 100%，不确定添加 { {1}} 对它，使用自定义类名作为自定义样式 ;) .

Answer 2

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

* {
 margin: 0;
 padding: 0;
}

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

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

Answer 3

您是否在 CSS 顶部添加了此代码片段

*{
    margin : 0;
    padding: 0;
}

Answer 4

删除填充表单“导航栏”

.navbar {
  padding: 0;
}

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

4 个答案: