Bootstrap 导航破坏站点宽度

Question

Nav 正在更改站点宽度。我不知道为什么会这样。我认为那是因为边距或填充，但找不到解决问题的方法。我得出的结论是 cousing 问题，但我不知道为什么会这样。请帮忙！

HTML代码：

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-8">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">IT SPECIALIST</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="menu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item active">
            <a class="nav-link" id="active" href="#">GŁÓWNA</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              O NAS
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Zespół</a>
              <a class="dropdown-item" href="#">Partnerzy</a>
              <a class="dropdown-item" href="#">Facebook Fanpage</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              OFERTA
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Odzyskiwanie Danych</a>
              <a class="dropdown-item" href="#">Wsparcie dla twojej firmy</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-link" href="#">USŁUGI DLA FIRM I OSÓB PRYWATNYCH</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-link" href="#">DLACZEGO MY</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-link" href="#">ZGŁOŚ AWARIĘ</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <div class="col-md-2"></div>
</div>

我删除了整个 css 代码，没有任何改变，但如果您需要它，它是：

CSS代码：

body {
  margin: none;
  padding: none;
}

.navbar .navbar-brand {
  margin-left: 1vw;
}

.navbar button {
  margin-right: 1vw;
}

.navbar .dropdown-item:hover, .navbar #nav-link:hover, .navbar #active {
  background-color: #5394dd;
  color: white;
}

.navbar .nav-item {
  margin-left: 0.5vw;
}

.navbar .nav-item:last-child {
  margin-right: 1vw;
}

编辑 1： row 是问题所在，在使用导航时，没有任何行和列，导航占用了整个站点的宽度，仅此而已。那么，有没有其他方法可以像这样将站点居中？

Answer 1

我不确定它到底是如何破坏网站的宽度的，但请尝试将其添加到您的样式中：

*{
margin: 0;
padding: 0;
}

Answer 2

移除导航栏周围的所有 col 并添加一个 container。

<div class="container">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <!--Your nav content here-->
   </nav>
</div>

Bootstrap 导航破坏站点宽度

Bootstrap Navigation destroying site width

html

css

sass

bootstrap-4