Bootstrap如何实现带有阴影效果的响应式输入框组-Bootstrap教程-PHP中文网

bootstrap中.input-group无法直接添加阴影，因其flex布局和渲染层级导致阴影被裁剪或遮挡；正确做法是用position-relative外层包裹并留白，再施加阴影。

bootstrap如何实现带有阴影效果的响应式输入框组

Bootstrap 本身不提供“带阴影的输入框组”开箱即用的类，.input-group 默认无阴影，且 shadow-* 工具类直接加在 .input-group 上会被内部元素裁剪或层级遮挡——不是写错了，是结构和渲染规则导致的。

为什么直接加 shadow-sm 到 input-group 没反应

常见现象：给 <div class="input-group shadow-sm"> 加阴影，预览里看不见，或者只在部分边缘露一点。根本原因是：<code>.input-group 默认是 display: flex，其子元素（.input-group-text、.form-control）会撑满容器，而 box-shadow 是绘制在元素 *外侧* 的，一旦父容器没留出足够“呼吸空间”，阴影就被兄弟元素盖住或被自身 overflow 隐形裁剪。

.input-group 没设 position: relative，导致阴影层叠顺序低
子元素如 .form-control 或 .input-group-text 有背景色或边框，视觉上“吃掉”了阴影区域
移动端小屏下，.input-group 宽度压缩后，shadow-lg 的模糊半径超出可用空间，直接被截断

正确做法：外层包裹 + 留白 + 精确控制阴影层级

必须拆开结构：阴影由外层容器承担，.input-group 专注布局，两者职责分离。

外层用 <div class="position-relative z-1"> 包裹整个 <code>.input-group，再加 shadow-sm 或自定义 box-shadow
给外层加 p-1 或 px-2（至少 0.25rem 水平内边距），为阴影留出绘制空间
避免对 .input-group-text 单独设 background-color——它默认是 #e9ecef，太亮会削弱阴影对比；可改用 bg-white 或透明背景
如果用了 .form-control:focus，确保它的 z-index 不高于外层，否则聚焦时阴影被控件盖住

示例结构：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<div class="position-relative z-1 p-1 shadow-sm">
  <div class="input-group">
    <span class="input-group-text bg-white border-end-0">@</span>
    <input type="text" class="form-control border-start-0">
</div>
</div>

响应式阴影适配要点

小屏下阴影不能照搬桌面参数，否则会糊成一块灰团，或挤压输入框可点击区域。

大屏用 box-shadow: 0 1px 3px rgba(0,0,0,0.08)，小屏（@media (max-width: 768px)）降为 0 1px 2px rgba(0,0,0,0.05)
别依赖 shadow-lg 做响应式切换——它只是固定值，无法随断点变化；改用自定义 CSS 类配合媒体查询
如果输入框组放在 .modal-body 或 .card-body 内，外层容器需额外加 z-index: 2，否则模态框遮罩层会盖住阴影
深色模式下，rgba(0,0,0,0.05) 在暗背景上几乎不可见，得用 @media (prefers-color-scheme: dark) { .input-group-shadow { box-shadow: 0 1px 3px rgba(255,255,255,0.06); } }

focus 状态与阴影联动容易踩的坑

想让输入框获得焦点时阴影加深？别直接写 .input-group:focus-within .input-group-shadow——:focus-within 在 Safari 旧版支持差，且 .input-group 本身不触发 focus。

真正有效的选择器是：.input-group-shadow .form-control:focus ~ .input-group-shadow 不成立，得靠 JS 监听或用 :has()（但兼容性有限）
更稳妥的做法：给外层加 class input-group-focused，用 JS 切换：document.querySelector('.form-control').addEventListener('focus', () => el.classList.add('focused'))
若用 Bootstrap 的 --bs-form-control-focus-box-shadow 变量，它只影响控件自身，不影响外层阴影——这是两个独立渲染层，别指望变量自动传导
移动端点击后阴影闪一下就消失？那是 :active 瞬时状态，必须配合 transition: box-shadow 0.15s 和 outline: none 才能稳定呈现