Bootstrap框架下Navbar无法占满全屏宽度 两侧间距如何移除

问题原因 #

你当前的代码存在两个导致导航两侧出现间距的核心问题：

• Bootstrap的col-12类默认自带左右15px的内边距，且col-*类必须嵌套在带row类的容器内才能抵消默认边距，你直接将col-12作为导航的最外层容器，又没有嵌套row，导致边距直接显现
• 浏览器默认的body标签自带8px的外边距，也会挤压导航的显示范围

解决方法 #

有两种方案可选，按需使用即可：

方案1：优化DOM结构（更推荐） #

直接删除多余的外层嵌套容器，将fixed-top类直接加到nav标签上，同时给body加m-0类清除默认边距，修改后的代码如下：

CSS代码

.logo {
  width: 100px;
}

HTML代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body class="m-0">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#"><img class="logo" src="https://assets.ccbp.in/frontend/responsive-website/landing-section-design-logo-img.png" alt="" /></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link" href="#">Blog</a>
        <a class="nav-item nav-link" href="#">Contacts</a>
      </div>
    </div>
  </nav>
</body>
</html>

方案2：不修改原结构，直接加样式清除边距 #

给外层的col-12容器加p-0类（Bootstrap自带的左右内边距清零类），同时给body加m-0类即可，修改后的外层代码如下：

<body class="m-0">
  <div class="col-12 fixed-top p-0">
    <div class="navigation">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <!-- 其余导航代码保持不变 -->
      </nav>
    </div>
  </div>
</body>

内容的提问来源于stack exchange，提问作者Girish Nandan