选择下拉式材料化 css全宽

Question

我试图添加2个选择dropDown materialize css并排，在我的react应用程序.但相反，他们是堆叠一个在顶部的另一个，并占据了整个宽度.这里是我的代码。

const SearchPillows = () => {


    return (
        <div className="container">
            <div className="input-field col s12">
                <select>
                    <option value="" disabled selected>Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <div className="input-field col s12">
                    <select>
                        <option value="" disabled selected>Choose your option</option>
                        <option value="1" className="left">Option 1</option>
                        <option value="2" className="left">Option 2</option>
                        <option value="3" className="left">Option 3</option>
                    </select>
                </div>
            </div>
            <p>hello</p>
        </div>
    );
};

export default SearchPillows;

请协助，谢谢!

Answer 1

你的代码中存在几个错误。

1) 没有 .row div。.col 必须住在行里才有响应。

2）没有类名使列并列，这是 .s6, .m6 .l6 等。

3）缺失结尾 div 标签后的第一次选择。

<div class="container">
    <div class="row"><!-- < This was missing -->
              <div class="input-field col s12 m6">
                <select>
                    <option value="" disabled selected>Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
              </div><!-- < This was missing -->
                <div class="input-field col s12 m6">
                    <select>
                        <option value="" disabled selected>Choose your option</option>
                        <option value="1" className="left">Option 1</option>
                        <option value="2" className="left">Option 2</option>
                        <option value="3" className="left">Option 3</option>
                    </select>
                </div>
            </div>
            <p>hello</p>
     </div>
</div>

编码笔.