调整Bootstrap特定标签页内容CSS 避免文字叠在感叹号图标下方

你完全可以为指定标签页自定义CSS，不会影响Bootstrap全局样式，也能完美解决文字换行跑到图标下方的问题。

推荐实现方案（Flex布局，无需计算缩进值，兼容性好） #

第一步：给带提示图标的行添加自定义类 #

给现有代码里每个包裹感叹号和文字的div添加自定义类warning-item，也可以同时移除原来行内写的text-align: justify，放到CSS里统一管理：

<!-- 修改后的单行结构示例 -->
<div class="warning-item">
  <i class="fa fa-exclamation-circle" style="color:red"></i>
  Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.
</div>

第二步：添加自定义CSS样式 #

你可以把这段CSS放到页面的<style>标签里，或者你的自定义CSS文件中，样式是绑定#homepage这个标签页ID的，只会对当前标签页生效，不会影响其他页面内容：

/* 仅对homepage标签页下的提示项生效 */
#homepage .warning-item {
  display: flex;
  /* 图标和文字的间距，可根据需求调整 */
  gap: 8px;
  text-align: justify;
  /* 底部间距，可按需调整 */
  margin-bottom: 10px;
}

#homepage .warning-item .fa-exclamation-circle {
  /* 防止窗口缩小时图标被挤压变形 */
  flex-shrink: 0;
  /* 微调图标和第一行文字的垂直对齐，可按需调整数值 */
  margin-top: 3px;
}

原理说明 #

原来的图标属于行内元素，和文字在同一文本流里，文字换行后自然从容器最左侧开始，就会显示在图标下方。用Flex布局后，图标和文字被拆成两个独立的布局单元，文字独占右侧剩余宽度，换行只会在自己的区域内进行，自然就实现了所有文字左对齐，不会跑到图标下方的效果。

备选方案：不用修改HTML，用悬挂缩进实现 #

如果不想修改现有HTML结构，可以直接用下面的CSS，同样只会对当前标签页生效：

#homepage div[style*="text-align: justify"] {
  /* 缩进值要大于图标宽度，当前图标约16px，加6px间距设22px即可，可按需调整 */
  padding-left: 22px;
  text-indent: -22px;
  margin-bottom: 10px;
}

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