如何缩短Bootstrap v5/CSS输入框宽度 保留响应式并保持居中

你要缩短Jumbotron区域输入框宽度、同时保留居中和响应式特性，直接使用Bootstrap 5原生工具类就能实现，不需要额外写复杂自定义CSS：

核心原理 #

input-group默认宽度为100%，会继承父级Jumbotron的全宽属性，所以只需要给input-group外层套一个带宽度限制、水平居中属性的容器即可。

修改方案1：使用宽度工具类（最简单） #

直接修改Jumbotron内的form代码块，修改后如下：

<form>
    <!-- 外层控制宽度+居中 -->
    <div class="mx-auto w-75 w-md-50 w-lg-40">
        <div class="input-group mb-3">
            <span class="input-group-text">@</span>
            <input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
            <button type="submit" class="btn btn-primary btn-md">Sign up</button> 
        </div>
    </div>
</form>

类说明： #

• mx-auto：水平外边距自动计算，实现容器居中
• w-75：超小屏幕下容器宽度为父元素的75%
• w-md-50：屏幕宽度≥768px时，容器宽度为父元素的50%
• w-lg-40：屏幕宽度≥992px时，容器宽度为父元素的40%

你可以按需调整宽度比例，比如改成w-md-60、w-lg-35都可以。

修改方案2：使用网格系统（更灵活） #

如果习惯用Bootstrap网格规范，也可以用如下写法，效果一致：

<form>
    <div class="row justify-content-center">
        <div class="col-10 col-md-7 col-lg-5">
            <div class="input-group mb-3">
                <span class="input-group-text">@</span>
                <input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
                <button type="submit" class="btn btn-primary btn-md">Sign up</button> 
            </div>
        </div>
    </div>
</form>

如果需要固定最大宽度，也可以给外层容器加自定义样式，比如：

.email-input-wrap {
    max-width: 550px;
}

然后给外层div加上email-input-wrap mx-auto类即可，小屏幕会自动适配宽度，不会出现横向滚动。

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