Bootstrap 4中row类为何仅占用约50%宽度？

我仔细看了你的代码，发现几个可能导致这个布局异常的关键点，咱们一步步来排查和修复：

1. 核心问题：混乱的导航结构与版本不匹配 #

你代码里有两个明显的问题：

• 嵌套了完整的.navbar组件：在.col-sm-11里又套了一个navbar-expand-lg，Bootstrap 4的.navbar默认是flex布局，自带内外边距，双重navbar的样式会互相干扰，挤压.row的可用宽度。
• 版本标注矛盾：页面标题写的是"Collapsible sidebar using Bootstrap 3"，但实际引入的是Bootstrap 4的CSS，版本不兼容很容易引发布局bug。

2. 分步修复方案 #

步骤一：重构导航栏结构 #

把侧边栏折叠按钮直接整合到主navbar中，去掉多余的.row和.col-sm-1/11嵌套，利用Bootstrap 4的原生flex布局分配空间，修改后的头部代码如下：

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <!-- 侧边栏折叠按钮 -->
      <button type="button" id="leftSidebarCollapse" class="navbar-btn d-sm-block d-md-none mr-3">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
      <!-- 移动端导航折叠按钮 -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- 导航内容区域 -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
</header>

步骤二：检查自定义CSS（style5.css） #

你的自定义样式文件很可能覆盖了Bootstrap的默认布局规则，比如如果有类似这样的代码：

.row {
  max-width: 50%;
  margin: 0 auto;
}

这会直接限制.row的宽度。建议打开浏览器开发者工具（F12），选中.row元素查看计算后的盒模型，定位到篡改宽度的CSS规则并删除或修改。

步骤三：统一Bootstrap版本 #

既然用了Bootstrap 4的CSS，记得补充对应的JS依赖（Bootstrap 4需要jQuery和Popper.js支持），避免功能和布局异常：

<!-- 放在body末尾 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

3. 验证方法 #

如果修复后还是有问题，用浏览器开发者工具选中.row，查看Elements面板的Styles标签，看看是否有自定义样式或继承样式限制了宽度，针对性调整即可。

内容的提问来源于stack exchange，提问作者Abdus Sattar Bhuiyan