基于类Bootstrap网格实现并列Div间距并保持等高的技术求助

嘿，我明白你的困扰了——既要给两个并排的盒子加间距，又得保持它们高度一致，用常规方法要么挤换行要么高低不齐，确实头疼。结合你用的类Bootstrap网格体系，我给你两个靠谱的解决方案：

方案一：自定义Gutter实现间距+等高 #

这个方法最贴合Bootstrap的设计思路，通过调整row和col的内外边距来实现间距，同时让盒子自动等高。

步骤1：添加自定义的row gutter样式 #

先给row加一个自定义类，用来控制列之间的间距：

/* 自定义20px间距的row类 */
.row-gap-20 {
  margin-left: -10px;
  margin-right: -10px;
}
.row-gap-20 > .col {
  padding-left: 10px;
  padding-right: 10px;
}

原理是用row的负外边距抵消col的内边距，这样两个col之间就会形成20px的总间距（10px+10px），而且不会超出row的宽度范围。

步骤2：让盒子继承父级高度 #

给你的两个盒子样式加上height: 100%，这样它们会继承外层col的高度：

.box1 {
  padding: 10px;
  background-color: blue;
  height: 100%; /* 新增：继承col的高度 */
}
.box2 {
  padding: 10px;
  background-color: yellow;
  height: 100%; /* 新增：继承col的高度 */
}

步骤3：修改HTML结构 #

用你之前的嵌套结构，加上自定义的row类就行：

<div className={'row row-gap-20'}>
  <div className={'col-md-12 col-lg-6'}>
    <ReactComponentOne className={`${styles.box1}`} />
  </div>
  <div className={'col-md-12 col-lg-6'}>
    <ReactComponentTwo className={`${styles.box2}`} />
  </div>
</div>

方案二：单列内边距+快速等高 #

如果不想写额外的row样式，也可以直接给第一个列加右侧内边距，再让盒子占满高度：

步骤1：添加列的内边距样式 #

/* 大屏幕下给列加20px右侧内边距 */
.pr-lg-20 {
  padding-right: 20px !important;
}

步骤2：同样设置盒子高度为100% #

和方案一一样，给.box1和.box2加上height: 100%。

步骤3：修改HTML结构 #

给第一个col加上自定义的内边距类：

<div className={'row'}>
  <div className={'col-md-12 col-lg-6 pr-lg-20'}>
    <ReactComponentOne className={`${styles.box1}`} />
  </div>
  <div className={'col-md-12 col-lg-6'}>
    <ReactComponentTwo className={`${styles.box2}`} />
  </div>
</div>

为什么之前的嵌套结构高度不一致？ #

你之前嵌套后高度不齐，是因为外层的col在row的flex布局下会被自动拉伸到相同高度，但你的.box1和.box2默认高度是auto（只包裹自身内容），没有继承col的高度。加上height: 100%后，盒子就会和外层col一样高，自然就对齐了。

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