Bootstrap栅格两列高度不一致怎么解决？

一秀云提问于 2026-02-11 04:13:24 阅读 17

组件

用Bootstrap的栅格系统做布局时，左边col-md-3固定宽度，右边col-md-9放动态内容。如果右边内容多，左边列的高度就只到自己内容结束，看起来特别丑，试过给父容器加height:100%也不行，怎么办啊？

代码结构是这样的：


<div class="row">
  <div class="col-md-3">左侧固定导航</div>
  <div class="col-md-9">右侧文章内容...</div>
</div>

还试过给.row加d-flex用flex布局，但这样手机端又排成一竖列了，这该怎么同时保持响应式和等高？

UI框架响应式框架

我来解答赞 6 收藏

反馈

2 条解答

设计师贝贝 Lv1

推荐的做法是用 Bootstrap 自带的 flex 工具类来解决这个问题，不需要额外写 CSS。

你之前试的 d-flex 其实方向是对的，但得配合 align-items: stretch 才行。Bootstrap 的栅格列默认就是基于 flex 的，.row 底层就是 display: flex，所以你只需要给 .row 加上 h-100 或者直接用 align-items-stretch 就能让两列等高。

不过要注意，要让子元素高度撑满，父级的高度也得有定义。常见做法是给 html 和 body 设置 min-height: 100%，然后从根往下传高度。

最简单有效的方案是这样改你的结构：

<div class="d-flex min-vh-100">

  <div class="row flex-grow-1">

    <div class="col-md-3">左侧固定导航</div>

    <div class="col-md-9">右侧文章内容...</div>

  </div>

</div>

或者更轻量一点，只在 row 上加 d-flex 并确保内容区域主导高度：

<div class="row g-0 h-100">

  <div class="col-md-3 bg-light h-100">左侧固定导航</div>

  <div class="col-md-9">右侧文章内容...</div>

</div>

关键点是给 .row 加 h-100 同时确保它的父容器也有高度（比如 layout wrapper 设 min-vh-100），这样在桌面端两列就会等高，在移动端由于断点切换，col 会自动堆叠，依然保持响应式，不会出问题。

这其实是 Bootstrap 5 文档里提到的标准行为：https://getbootstrap.com/docs/5.3/utilities/flex/#align-items

如果还不行，检查下是不是被 padding 或 border 影响了布局，可以加上 box-sizing: border-box —— 不过 Bootstrap 默认已经设了，一般不用动。

2026-02-13 05:00

Code°志燕 Lv1

试试这个方法，用Bootstrap自带的flex工具类就能搞定，不用写额外CSS。

给.row加上d-flex和align-items-stretch（其实默认就是stretch，但明确写上更保险），这样子列就会自动拉高到一样高度。Bootstrap 4和5的栅格本身就是基于flex的，只要父容器是d-flex，子元素会自动占满最高的一列。

你的代码改成这样就行：

<div class="row d-flex">

  <div class="col-md-3">左侧固定导航</div>

  <div class="col-md-9">右侧文章内容...</div>

</div>

注意别在col上加height:100%，这会影响flex的正常拉伸。手机端不用担心，因为到小屏幕时col-md-*会自动堆叠成一列，这是Bootstrap响应式的正常行为，视觉上依然正确，只是不需要等高了而已。

如果某些旧版Bootstrap不生效，可以加个class="h-100"在两个col上，或者外层包一个d-flex的div。但正常情况下上面那写法就够了。

2026-02-11 05:04