如何在反应中在一行中制作两个下拉菜单？

Question

我不知道我做错了什么，但这两个下拉列表没有在一行中渲染，请有人帮助我在一行中渲染它们

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Select from 'react-select';

function NavForRest() {

    const langOptions = [
                    { value: 'EN', label: 'EN' },
                    { value: 'HINDI', label: 'HINDI' },
                    { value: 'SANSKRIT', label: 'SANSKRIT' }
    ]
    
    const currencyOptions = [
                    { value: 'INR', label: 'INR' },
                    { value: 'INR', label: 'INR' },
                    { value: 'AUD', label: 'AUD' }
                    ]

    return (
            <div className="d-flex flex-row justify-content-between w-80 mt-0 mb-0" style={{"width":"80%", "margin":"auto"}}>

                <div style={{"display":"inline"}}>
                    <span>
                         <Select options={langOptions} />
                    </span>
                    <span>
                        <Select options={currencyOptions} />
                    </span>
                </div>
                </div>
    )
}

export default NavForRest;

这是输出

输出图像

Answer 1

1）您可以flexbox在此处使用并在一行中设置样式

这是有效的，因为默认情况下flex-direction你row只需添加display: flex它就会排列在单行中

现场演示

<div style={{ display: "flex" }}>

EXTRA INFORMATION: You can also use gap property to add some space in between flex-items

<div style={{ display: "flex", gap: "1rem" }}>

2）既然你也在bootstrap这里使用，那么你只需要添加d-flex类就可以了。