仅用CSS实现单选按钮根据侧边栏存在切换3/2列布局是否可行？

方案说明 #

可以纯CSS实现该需求，不需要依赖JS动态切换类名，核心利用CSS的:has()伪类或兄弟选择器判断侧边栏是否存在，结合Grid布局自动适配列数，也可以完美兼容Bootstrap框架。

核心实现思路 #

你不需要再给container动态加col2/col3类名，只需要固定HTML结构规则：单选按钮组所在容器和侧边栏（如果存在）为同级节点，都放在container下，通过CSS自动识别是否有.sidebar节点来调整布局：

• 默认状态下（无侧边栏），单选按钮容器的grid列数为3列
• 当container下存在.sidebar节点时，自动将container布局调整为2:1，同时单选按钮容器的grid列数改为2列

具体代码实现 #

CSS代码

.item {
  background: #ececec;
  margin: 2rem;
  padding: 20px;
}

.sidebar {
  background: #f32a9b;
  padding: 20px;
}

/* 默认3列布局 */
.container {
  display: grid;
  grid-template-columns: 1fr;
}
.container .radio-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* 存在侧边栏时自动切换为2列 */
.container:has(.sidebar) {
  grid-template-columns: 2fr 1fr;
}
.container:has(.sidebar) .radio-group {
  grid-template-columns: repeat(2, 1fr);
}

如果需要兼容不支持:has()的低版本浏览器，你可以把侧边栏固定放在单选按钮容器后面，用相邻兄弟选择器实现，兼容性更好：

/* 兼容低版本浏览器的写法 */
.container {
  display: grid;
  grid-template-columns: 1fr;
}
.radio-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* 单选按钮组后面跟着sidebar时，调整布局 */
.radio-group + .sidebar {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.container:has(.radio-group + .sidebar) {
  grid-template-columns: 2fr 1fr;
}
.radio-group + .sidebar ~ .radio-group {
  grid-template-columns: repeat(2, 1fr);
}

HTML结构示例

不需要再动态加类名，直接按结构输出即可：

<!-- 3列布局（无侧边栏） -->
<h2>3 cols</h2>
<div class="container">
  <div class="row radio-group">
    <div class="item"><input type="radio" name="radio">radio</div>
    <div class="item"><input type="radio" name="radio">radio</div>
    <div class="item"><input type="radio" name="radio">radio</div>
    <div class="item"><input type="radio" name="radio">radio</div>
    <div class="item"><input type="radio" name="radio">radio</div>
    <div class="item"><input type="radio" name="radio">radio</div>
    <button type="submit">Submit</button>
  </div>
</div>

<!-- 2列布局（带侧边栏） -->
<h2>2 cols with sidebar</h2>
<div class="container">
  <div class="row radio-group">
    <div class="item"><input type="radio" name="radio">radio</div>
    <div class="item"><input type="radio" name="radio">radio</div>
    <div class="item"><input type="radio" name="radio">radio</div>
    <div class="item"><input type="radio" name="radio">radio</div>
    <div class="item"><input type="radio" name="radio">radio</div>
    <div class="item"><input type="radio" name="radio">radio</div>
    <button type="submit">Submit</button>
  </div>
  <div class="col sidebar">
    sidebar text. sidebar text. sidebar text. sidebar text. sidebar text.
  </div>
</div>

Bootstrap兼容方案 #

如果你想用原生Bootstrap类实现，也可以搭配少量自定义CSS实现，不需要修改Bootstrap核心规则，只需要加上面的自定义适配CSS即可，完全兼容Bootstrap的栅格系统。

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