Bootstrap 4页面移动端/窗口缩小时块内文本溢出容器问题求助

问题原因 #

文本溢出是自定义CSS规则和Bootstrap4原生栅格规则冲突导致的，核心问题有3个：

• 栅格断点覆盖不全，小于576px的移动端断点下没有指定列宽度，导致容器宽度计算异常
• 给自带flex布局的.row元素额外添加了自定义flex规则，且未设置换行属性，小屏宽度不足时强制挤压子元素宽度
• 给信息容器设置了width:100% !important，直接覆盖了Bootstrap栅格的宽度计算逻辑，同时链接容器未设置换行规则，小屏易溢出

修复方案 #

1. HTML部分调整

调整栅格类覆盖全尺寸断点，按需适配小屏布局：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="Site.css">
     <link rel="stylesheet" href="bootstrap.min.css">
      <link rel="stylesheet" href="bootstrap.css">
    <title>Визитная карточка</title>
</head>
<body class="setting-body">

<div class="head">
    <h1>Домашнее задание</h1>
</div>

<div class="copy-jumbotron jumbotron ">
    <!-- 移除冲突的parent类，直接控制row宽度居中 -->
    <div class="row" style="width:90%;margin:0 auto;">
        <!-- 头像列：小屏占满整行，sm及以上尺寸占4列 -->
        <div class="col-12 col-sm-4 setting-div-for-image">
            <div>
                <img class="setting-image" src="Resources/Avatar.jpg" />
            </div>
        </div>
        <!-- 信息列：小屏占满整行，sm及以上尺寸占8列填充满剩余空间 -->
        <div class="col-12 col-sm-8 setting-information">
            <h2>Королев Максим Евгеньевич</h2>
            <p>Студент с многопрофильного колледжа ТИУ, желающий научиться программировать</p>
            <p>Ссылки на социальные <wbr /> сети:</p>
            <div>
                <div class="links">
                    <div class="links">
                        <a class=" links-iteems text-links" target="_blank" href="#">
                            <img class="img-links" src="Resources/Git-Icon-Black.png" />
                            <p class="paragraph">GitHub</p>
                        </a>
                        <a class="links-iteems text-links" target="_blank" href="#">
                            <img class="img-links" src="Resources/Vklogo.png" />
                            <p class="paragraph">Вконтакте</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

2. CSS部分修改

删除冲突规则，补充换行适配属性：

*{box-sizing:border-box;}
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* 移除冲突的.parent规则 */

.setting-image{
    width:150px;
    height:150px;
    border-radius:90px;
    align-content:center;
}
.setting-div-for-image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.setting-information{
    /* 移除冲突的width:100% !important */
     overflow-wrap: break-word;
     word-break: break-word; /* 补充对西里尔长文本的换行支持 */
}

.links {
    display: flex;
    flex-wrap: wrap; /* 新增链接容器换行规则，小屏自动换行 */
    gap: 20px; /* 用gap控制间距，避免换行后右边距残留 */
}
.links-iteems {
    display: flex;
}

.img-links{
    width:30px;
    height:30px;
    flex:auto;

}

.text-links {
    text-decoration: none;
    color: black;
    font-size: 14px;
}
.text-links:hover {
    text-decoration: none;
    color: #1f8ac8;
    font-size: 14px;
}
.paragraph {
    display:flex;
    margin:0px;
    margin-left:10px;
    align-items: center;
    justify-content: center;
}

.copy-jumbotron {
    margin-top: 100px;
    background: #fcfafa !important;
    -webkit-box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
    border-radius: 20px;
    overflow-wrap: break-word;
    padding: 20px 0;
}
.head{
    font-size:25px;
}

.setting-body{
    margin-right: 15px;
    margin-left: 15px;
}

修改完成后小屏下会自动变成头像在上、信息在下的布局，文本和链接都会自动换行不会溢出容器。如果需要小屏也保持左右并排布局，把两个列的col-12改成col-6即可，同时可以给h2标签设置更小的字号适配窄屏。

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