Bootstrap覆盖style.css样式求助：多种解决方案无效

核心问题分析 #

1. Bootstrap对标题（<h4>等）、段落元素有内置样式声明，优先级高于从body继承的样式，导致自定义字体设置无法生效。
2. 固定容器高度+错误的clamp参数顺序，引发文本溢出容器、标题字体异常过小的问题。
3. 过度复杂的选择器既没必要，还会增加调试难度。

具体修复方案 #

1. 直接覆盖标题与文本的字体样式

给所有需要自定义字体的元素直接设置样式，绕过继承优先级限制：

html, body, h1, h2, h3, h4, h5, h6, p, .heading, .about-us {
    width: 100%;
    padding: 0;
    margin: 0;
    font-weight: 200;
    box-sizing: border-box;
    font-family: "DM Sans", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
}

2. 修正文本溢出与字体大小问题

• 修复clamp参数顺序：clamp的正确格式是clamp(最小值, 首选值, 最大值)，你之前的参数顺序写反了，导致标题字体异常：

div.gewerke-container div.gewerke h4.heading {
    font-size: clamp(1rem, 1vh, 1.5rem);
}

• 替换固定高度为最小高度：避免长内容被截断，同时保留容器基础高度：

#gewerke-container > div.gewerke {
    overflow: hidden;
    background-color: white;
    border-radius: 5px;
    width: 25.6%;
    min-height: 35vh; /* 替换原固定height为min-height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 2vh;
    padding: 0.9375rem 1.5625rem;
}

/* 同步调整特殊项高度 */
.gewerke-container .gewerke:nth-child(3), .gewerke-container .gewerke:nth-child(5) {
    min-height: 40vh;
}

若需要固定高度且允许滚动，可将overflow: hidden替换为overflow-y: auto。

3. 简化选择器提升优先级与可维护性

ID选择器优先级远高于Bootstrap的类选择器，无需嵌套过多层级：

#gewerke-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5vh;
    background-color: rgb(243, 243, 243);
    padding: 2vh;
    padding-top: 8vh;
    justify-content: center;
    margin: 0;
}

#gewerke-container .gewerke:hover {
    color: white;
    background-color: rgb(0, 184, 225);
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

效果验证 #

修改完成后，自定义字体将正确应用到所有文本元素，容器会根据内容自动调整高度（或允许滚动），文本不再溢出，匹配预期布局效果。

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