引入Bootstrap后Div间出现白色线条问题求助及代码排查

以下是针对该问题的常见原因及解决方法：

1. 移除Bootstrap默认的margin/padding影响 #

Bootstrap的全局样式会给部分元素设置默认margin或padding，导致相邻Div间出现间隙。用浏览器开发者工具（F12）定位目标Div，查看盒模型中的margin/padding数值，针对性重置：

/* 针对单个Div重置边距 */
.target-div {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 全局批量重置Div的边距和内边距 */
div {
  margin: 0;
  padding: 0;
}

2. 覆盖未被Bootstrap重置的浏览器默认样式 #

尽管Bootstrap自带Reboot重置样式，但个别浏览器的默认Div样式可能残留，手动添加全局覆盖：

* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

3. 消除背景色差异导致的视觉缝隙 #

如果Div背景色与父容器/body背景色不同，Div间的间隙会露出底层白色。解决方法二选一：

• 给父容器设置与Div一致的背景色：

.parent-wrap {
  background-color: #你的Div背景色值;
}

• 用Flex布局让Div紧密排列：

.parent-wrap {
  display: flex;
  flex-direction: column;
}
.parent-wrap div {
  flex: 1;
  margin: 0;
}

4. 移除Bootstrap自动添加的边框样式 #

检查是否不小心给Div应用了Bootstrap的border/border-top/border-bottom类，若有则移除这些类，或用自定义CSS覆盖：

.target-div {
  border: none !important;
}

5. 重置行高避免内联元素撑开间隙 #

若Div内部包含文本或内联元素，Bootstrap默认的line-height可能导致Div高度被撑开，产生视觉缝隙：

.target-div {
  line-height: 1;
}

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