使用Bootstrap开发页面时表单组件无法同行渲染问题求助

问题原因 #

• 栅格结构不符合规则：Bootstrap的行容器（.form-row/.row）属于栅格系统组件，要求所有直接子元素必须是带.col相关类的列容器，你直接把按钮放在行容器下，没有套列容器，按钮会作为块级元素占满整行，自然会触发换行。
• 版本兼容问题：如果你使用的是Bootstrap 5，.form-row类已经被正式弃用，需要替换为.row类，可配合.g-*类自定义列间距。

修复后代码 #

const AddRestaurent = () => {
    return (
        <div className="mb-4">
            <form action="">
                {/* Bootstrap4保留form-row，Bootstrap5替换为row即可，align-items-center实现垂直居中 */}
                <div className="form-row align-items-center">
                   <div className="col">
                      <input type="text" className="form-control" placeholder="name"/>
                    </div>
                    <div className="col">
                      <input type="text" className="form-control" placeholder="location"/>
                    </div>
                    <div className="col">
                        <select className="custom-select my-1 mr-sm-2">
                            <option disabled>Price Range</option>
                            <option value="1">$</option>
                            <option value="2">$$</option>
                            <option value="3">$$$</option>
                            <option value="4">$$$$</option>
                            <option value="5">$$$$$</option>
                        </select>
                    </div>
                    {/* 给按钮套col-auto容器，宽度自适应内容 */}
                    <div className="col-auto">
                        <button className="btn btn-primary">Add</button>
                    </div>
                </div>               
            </form>
        </div>
    )
}

export default AddRestaurent

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