Bootstrap导致文本截断？简历迁移Bootstrap遇排版问题求助

嘿，我来帮你搞定这个Bootstrap集成时遇到的布局bug～结合你描述的container嵌套row、左右分栏的结构，大概率是网格系统使用不当或者原有CSS与Bootstrap样式冲突导致的，下面给你一步步的解决思路：

1. 先确认网格结构是否符合Bootstrap规范 #

Bootstrap的网格系统要求row必须搭配col-*类来分配宽度，如果你只给左侧联系方式加了列类，右侧地址没加，或者列的宽度总和超过12，就会出现对齐错乱、内容挤压的情况。

给你一个标准的左右分栏示例，你可以对照调整：

<div class="container">
  <div class="row">
    <!-- 左侧联系方式：中等屏幕及以上分配8份宽度 -->
    <div class="col-md-8 contact-info">
      <p>电话：13xxxxxxxxx</p>
      <p>GitHub：your-github-id</p>
      <p>邮箱：your-email@xxx.com</p>
    </div>
    <!-- 右侧地址：中等屏幕及以上分配4份宽度，和左侧总和为12 -->
    <div class="col-md-4 contact-address">
      <p>地址：XX省XX市XX区XX街道XX号XX小区XX室</p>
    </div>
  </div>
</div>

如果需要在小屏幕上自动堆叠，只保留col-md-*即可，移动端会自动变成100%宽度。

2. 排查原有CSS与Bootstrap的样式冲突 #

你之前用XHTML+CSS写的简历，可能有自定义的width、margin、padding、text-align属性，这些很容易和Bootstrap的默认样式冲突：

• 比如你给右侧地址容器设置了固定宽度width: 300px，但Bootstrap的col-md-4已经按比例分配了宽度，两者叠加就会导致挤压截断；
• 或者原有CSS设置了text-align: right，但Bootstrap的默认文本对齐是左对齐，出现对齐异常。

调试小技巧：

1. 打开浏览器开发者工具（F12），选中右侧地址的元素，查看「计算样式」（Computed），看哪些属性被划掉或者异常；
2. 暂时注释掉原有CSS中针对这些元素的样式，看是否恢复正常，再逐步恢复排查冲突的属性。

3. 解决文本截断问题 #

如果是长地址文本被截断，大概率是overflow属性或者换行规则的问题，你可以给地址文本添加以下CSS规则：

.contact-address p {
  overflow-wrap: break-word; /* 让长单词/连续字符自动换行 */
  word-break: break-all; /* 针对中文的强制换行，避免超出容器 */
  white-space: normal; /* 确保文本不会强制单行显示 */
}

这样即使地址很长，也会自动换行，不会被截断。

额外提示：检查Bootstrap的引入顺序 #

确保你是先引入Bootstrap的CSS文件，再引入自己的自定义CSS文件，这样自定义样式才能覆盖Bootstrap的默认样式，避免样式被意外覆盖。

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