如何通过布尔值控制Bootstrap列排布实现扁平化结构切换

不需要修改DOM结构，仅通过动态切换Bootstrap栅格宽度+偏移类即可实现需求，实现规则如下：

• A列：布尔值为true时用col-6，否则用col-4
• B列：布尔值为true时用col-6，否则用col-4
• C列：布尔值为true时用col-6 offset-6，否则用col-4

完整代码示例 #

可适配Vue/React/原生JS等任意框架，仅需替换三元表达式的语法即可：

<div class="row">
  <!-- A列 -->
  <div class="${value ? 'col-6' : 'col-4'}">A</div>
  <!-- B列 -->
  <div class="${value ? 'col-6' : 'col-4'}">B</div>
  <!-- C列 -->
  <div class="${value ? 'col-6 offset-6' : 'col-4'}">C</div>
</div>

效果验证 #

• 布尔值为false时：三列均为col-4，总宽度刚好12，三等分布局完全符合要求
• 布尔值为true时：A、B各占6列撑满第一行，C列的offset-6会触发栅格自动换行逻辑，C列移动到第二行后，左侧空出6列宽度，自身占右侧6列，正好在B列下方垂直堆叠，完全实现目标效果

如果使用Bootstrap 3版本，偏移类需要修改为col-xs-offset-6，可根据响应式断点需求替换xs为sm/md/lg等参数

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