使用Bootstrap时transform的scale属性失效如何解决？

我是前端领域的纯新手，正在学习Bootstrap框架。发现为元素添加transform的scale缩放动画时，该动画失效，但不引入Bootstrap时动画可正常运行。请问有什么可行的替代方案？

我的代码 #

HTML #

<main class="row g-0 align-items-center">
    <div class="col-md-6 g-0 ">
        <div class="left_side text-center ">
            <h1 class="titulo_index">¿Quienes Somos?</h1>
            <p class="texto_index">Desde 1933 tostamos nuestro propio café.
        Lo cuidamos desde la selección de sus granos, hasta la taza, conservando el amor y el respeto que tenemos por lo que hacemos, desde el primer día. Por eso nuestro café es <strong> ÚNICO.</strong>
            </p>
            <a id="i_link" class="index_link" href="menu.html">¡Conoce nuestro menu!</a>
        </div>
    </div>
</main>

CSS #

.index_link{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 40px;
    padding: 10px 20px 10px 20px;
    width: 400px;
    color: black;
    background-color: #d99771;
    border: #442b0c 2px solid;
    border-radius: 25px;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 3px 5px 3px black;
}
.index_link:hover{
    background-color: #dbb098;
    scale: 1.2;
    box-shadow: 10px 10px 8px black;
}

可行的解决办法 #

1. 提升选择器优先级 #

Bootstrap的样式优先级可能比你自定义的更高，导致hover时的scale被覆盖。可以用更具体的选择器，比如结合元素ID：

#i_link:hover{
    background-color: #dbb098;
    transform: scale(1.2);
    box-shadow: 10px 10px 8px black;
}

或者给scale属性加!important（应急用，不推荐大规模使用）：

.index_link:hover{
    background-color: #dbb098;
    scale: 1.2 !important;
    box-shadow: 10px 10px 8px black;
}

2. 改用transform完整写法 #

把简写的scale:1.2换成完整的transform: scale(1.2)，避免和Bootstrap中可能存在的transform属性冲突：

.index_link:hover{
    background-color: #dbb098;
    transform: scale(1.2);
    box-shadow: 10px 10px 8px black;
}

3. 检查并覆盖Bootstrap的默认transform #

Bootstrap可能给a标签或父元素设置了transform: none之类的重置样式，可以在自定义CSS中明确覆盖：

.index_link{
    /* 保留原有样式 */
    transform: none; /* 先重置transform，确保后续hover生效 */
}
.index_link:hover{
    background-color: #dbb098;
    transform: scale(1.2);
    box-shadow: 10px 10px 8px black;
}

原因说明 #

出现这个问题的核心是Bootstrap的全局样式或组件样式，可能通过更高优先级的选择器给元素设置了transform相关属性，或者你的自定义样式优先级不够，导致hover时的scale效果被覆盖。

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