Bootstrap栅格布局如何减半列间距 实现表单完整适配容器

问题描述 #

• 页面划分为左右两个div元素，右侧区域使用Bootstrap container容器承载表单内容，要求每行排布8列表单字段
• 曾尝试给row元素添加no-gutters类，但该类会完全移除列间距，导致内容可读性下降、排版效果差
• 核心需求：将列间距缩小为Bootstrap默认值的一半，保证TWG字段后的最后一行空白输入框完整显示在表单容器边框内部，标签与输入行之间的留白同步缩小为原有大小的一半
• 现有编写代码如下：

.col-eq{width: calc(100% / 8);max-width:50%} 
.myContainer { background-color: lightyellow; border: 1px solid #aaa;}

<div> </div>

实现步骤 #

不需要修改Bootstrap源码，自定义半间距栅格规则，调整3处样式即可满足需求：

1. 新增半间距row类，替换默认全宽间距
   Bootstrap默认栅格的row左右负margin为-15px，列左右内边距为15px，将数值减半即可实现半间距效果，不会完全消除留白影响可读性：

   .row-half-gutter {
     margin-left: -7.5px;
     margin-right: -7.5px;
   }
   .row-half-gutter > [class*="col-"] {
     padding-left: 7.5px;
     padding-right: 7.5px;
   }
   

   给包裹表单字段的row元素添加row-half-gutter类，移除原有的no-gutters类即可。
2. 修复自定义.col-eq的样式错误
   原有样式中max-width:50%会导致列宽计算错乱引发布局溢出，修正为8列对应的宽度值，补全flex布局必要属性：

   .col-eq {
     flex: 0 0 12.5%;
     width: 12.5%;
     max-width: 12.5%;
     position: relative;
   }
   

3. 给容器添加匹配的内边距
   调整.myContainer的内边距适配半间距尺寸，避免内容贴边或溢出容器：

   .myContainer {
     background-color: lightyellow;
     border: 1px solid #aaa;
     padding: 15px 7.5px;
   }
   

注意：自定义样式需要放在Bootstrap默认样式文件之后引入，避免优先级不足被原有样式覆盖。调整完成后列间距为默认值的一半，最后一列输入框会完整显示在容器内部，标签和输入区域的留白同步缩小，不会出现排版拥挤的问题。

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