如何让React表单输入框与下拉框长度一致且占电脑端1/3宽度

问题原因 #

Bulma框架中，input组件默认宽度为100%，但select外层的.select容器默认未设置100%宽度，导致两者长度不一致；同时未限制控件的最大宽度，所以会铺满窗口。

解决方案（两种方法任选其一） #

方法1：使用Bulma内置类实现

直接利用Bulma提供的类来统一宽度并控制整体尺寸：

• 给.select添加is-fullwidth类，让下拉框占满父容器宽度，与input对齐
• 用一个容器包裹所有输入控件，添加is-one-third mx-auto类，实现页面1/3宽度且居中

修改后的React代码：

import React from 'react'
import "./Simulation.scss"
import { useLocation } from 'react-router-dom';

function Simulation() {
    const calculation = () => {
        // 补充你的计算逻辑
    }

    return (
        <>
            <section className="section has-text-centered">
                {/* 新增容器控制整体宽度 */}
                <div className="is-one-third mx-auto">
                    <input className="input mb-3" type="text" placeholder="Name" />
                    <input className="input mb-3" type="text" placeholder="Second Name" />
                    <div className="control mb-3">
                        {/* 给select添加is-fullwidth类 */}
                        <div className="select is-fullwidth">
                            <select>
                                <option>Interests</option>
                                <option value="natural_gas">Football</option>
                                <option value="oil">Gaming</option>
                                <option value="electric">Art</option>
                            </select>
                        </div>
                    </div>
                    <div className="field is-grouped">
                        <div className="control">
                            <button className="button is-link" onClick={calculation}>Calculation</button>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}

export default Simulation

方法2：自定义SCSS样式控制

如果不想依赖Bulma的宽度类，可以在Simulation.scss中添加自定义样式：

// 控制输入控件容器的宽度和居中
.input-container {
    max-width: 33.33%;
    margin: 0 auto;
}

// 让select容器占满宽度
.select {
    width: 100%;
}

然后在React代码中给容器添加input-container类：

// ...其他代码
<section className="section has-text-centered">
    <div className="input-container">
        <input className="input mb-3" type="text" placeholder="Name" />
        <input className="input mb-3" type="text" placeholder="Second Name" />
        <div className="control mb-3">
            <div className="select">
                <select>
                    <option>Interests</option>
                    <option value="natural_gas">Football</option>
                    <option value="oil">Gaming</option>
                    <option value="electric">Art</option>
                </select>
            </div>
        </div>
        <div className="field is-grouped">
            <div className="control">
                <button className="button is-link" onClick={() => calculation()}>Calculation</button>
            </div>
        </div>
    </div>
</section>
// ...其他代码

注意事项 #

• 确保Bulma框架已正确引入，否则内置类不会生效
• 如果页面有响应式需求，可以添加is-responsive类或自定义媒体查询，在移动端自动调整宽度

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