Bootstrap导航导致页面宽度异常及替代居中方案求助

问题根源 #

Bootstrap 中.row类默认设计了左右各-15px的负边距，用来抵消内部列（.col-*）的左右内边距，该类必须嵌套在.container或.container-fluid容器内使用。你没有给row加外层容器，负边距会让元素宽度超出视口，触发横向滚动条，表现为页面宽度异常。
另外你自定义CSS里body的margin: none、padding: none是无效写法，正确有效值为0，默认的body自带边距也可能干扰布局。

可行的居中方案 #

方案1：修正原有行列结构 #

在row外层套一个.container或.container-fluid容器，负边距会被容器默认的15px左右内边距抵消，不会再出现宽度异常，同时保留你原有的居中逻辑：

<!-- 新增外层容器 -->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <!-- 原有的nav代码不变 -->
      <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>
</div>

对应CSS修正部分：

body {
  margin: 0;
  padding: 0;
}
/* 其余原有CSS代码不变 */

方案2：去掉行列结构，用Bootstrap原生容器实现居中 #

Bootstrap的.container类自带左右margin: auto实现水平居中，同时有响应式最大宽度，比手动加左右空白列的写法更简洁规范，直接修改HTML结构即可：

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- 原有nav内部代码不变 -->
  </nav>
</div>

如果需要导航内容的宽度和之前col-md-8的宽度一致，可给container类自定义最大宽度，或者替换为container-md等预设断点容器即可。

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