Bootstrap 4中如何让div与垂直导航横向并排且宽度适配Navbar？

这个问题的核心是你把导航组件和网格列类（col-md-5）直接绑定在了同一个div上，导致Bootstrap的组件样式和网格布局样式冲突，最终造成宽度超出。下面给你两种解决思路：

一、使用Bootstrap内置类的标准写法（推荐） #

正确的做法是把网格列作为容器，在里面嵌套垂直导航组件，这样既保留网格布局的特性，又不会让导航的默认样式干扰布局宽度。修改后的代码如下：

<div class="container mt-3">
  <div class="nav navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Some cool thing</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my-navbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="my-navbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link">Some menu entry</a>
        </li>
      </ul>
    </div>
  </div><!-- end of .nav -->
  
  <div class="row mt-2">
    <!-- 先写col，内部嵌套nav -->
    <div class="col-md-5">
      <div class="nav flex-column nav-pills">
        <a href="#" class="nav-link active">Something</a>
      </div>
    </div>
    <div class="col-md-7 border">
      <h1>Hello world</h1>
    </div>
  </div>
</div>

为什么这样有效？ #

• Bootstrap的.col-*类自带左右内边距（padding-left/padding-right: 15px），而.row类的负左右边距（margin-left/margin-right: -15px）刚好抵消container的内边距，保证内容和顶部Navbar对齐。
• 把.nav组件放到col内部，导航的默认内边距只会作用在col的范围内，不会超出container的宽度。

二、手动修复（如果不想嵌套结构） #

如果你坚持要把nav和col类放在同一个元素上，可以通过自定义CSS来抵消冲突的内边距：

.nav.flex-column.nav-pills.col-md-5 {
  padding-left: 0;
  padding-right: 0;
}
.nav.flex-column.nav-pills.col-md-5 .nav-link {
  padding-left: 1rem; /* 还原nav-link的左侧内边距，避免内容贴边 */
  padding-right: 1rem;
}

然后保留你原来的HTML结构即可，不过这种方法不如第一种符合Bootstrap的设计规范，后续维护可能会有隐患。

关于不用row实现并排的补充 #

如果不想用.row，可以利用Bootstrap的flex类让container的子元素横向排列，同时控制宽度：

<div class="container mt-3">
  <!-- 顶部Navbar不变 -->
  <div class="nav navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- ... 原有代码 ... -->
  </div>
  
  <!-- 用d-flex实现横向排列，代替row -->
  <div class="d-flex mt-2">
    <div class="flex-shrink-0 flex-grow-0" style="width: calc(5/12 * 100%);">
      <div class="nav flex-column nav-pills">
        <a href="#" class="nav-link active">Something</a>
      </div>
    </div>
    <div class="flex-grow-1 border ml-2">
      <h1>Hello world</h1>
    </div>
  </div>
</div>

不过这种方法需要手动计算宽度，不如row+col的组合灵活，尤其是在响应式场景下。

内容的提问来源于stack exchange，提问作者just.me