使用jQuery隐藏Bootstrap 4列后如何保持剩余列宽度不变

这个问题在Bootstrap 4的flexbox网格系统里很典型——默认情况下，.col-*类自带flex-grow: 1属性，一旦其他列被隐藏，剩余列就会自动拉伸填满整个容器。要让可见列保持原有宽度，只需要改掉这个默认行为就行，下面是具体的解决方案：

核心思路 #

Bootstrap 4的列默认是flex: 1 0 0%，其中flex-grow: 1是导致拉伸的关键。我们需要给需要固定宽度的列添加flex-grow-0类，让它放弃“抢占剩余空间”的能力，同时保留原本col-*类定义的宽度比例。

具体实现 #

1. 基础场景：等宽列固定宽度 #

假设你原本有4个col-3的等宽列，隐藏部分列后，让剩余列保持25%的宽度：

<div class="container">
  <div class="row">
    <!-- 隐藏的列 -->
    <div class="col-3 flex-grow-0 hide-this">列1</div>
    <div class="col-3 flex-grow-0 hide-this">列2</div>
    <!-- 保持宽度的可见列 -->
    <div class="col-3 flex-grow-0">列3</div>
    <div class="col-3 flex-grow-0 hide-this">列4</div>
  </div>
</div>

<style>
/* 模拟你的hide-this隐藏类 */
.hide-this {
  display: none;
}
</style>

这样操作后，即使其他列被隐藏，列3也会稳稳保持25%的宽度，不会撑满整个行。

2. 自定义宽度列的情况 #

如果你的列宽度不一致（比如col-4、col-2），同样给每个列加上flex-grow-0即可，它们会各自保留col-*对应的宽度比例：

<div class="row">
  <div class="col-4 flex-grow-0 hide-this">占1/3宽度的列</div>
  <div class="col-2 flex-grow-0">占1/6宽度的列</div>
  <div class="col-6 flex-grow-0 hide-this">占1/2宽度的列</div>
</div>

3. 响应式需求：移动端仍填满宽度 #

如果你希望在小屏幕上列还是能填满容器，只在大屏上保持固定宽度，可以用Bootstrap的响应式flex类，比如flex-md-grow-0：

<div class="col-3 flex-md-grow-0">
  移动端占满宽度，中等屏幕及以上保持25%宽度
</div>

4. 自动宽度（col-auto）的场景 #

如果你的列是用col-auto根据内容自适应宽度，加上flex-grow-0后，隐藏其他列时它会保持自身内容的宽度，不会被拉伸：

<div class="row">
  <div class="col-auto flex-grow-0 hide-this">短文本</div>
  <div class="col-auto flex-grow-0">这是一段较长的文本内容</div>
</div>

原理补充 #

简单说，flex-grow-0是Bootstrap内置的工具类，它会把列的flex-grow属性设为0，这样列就不会再去抢占容器的剩余空间，只会占用自己原本定义的宽度（无论是col-*的比例宽度，还是col-auto的内容宽度）。

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