select 下拉菜单具体化 css 全宽

Question

我正在尝试在我的 React 应用程序中并排添加 2 select dropDown materialize css。但相反，它们堆叠在一起并占据了整个宽度。这是我的代码。

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) 没有.rowdiv。 .col 必须成排居住才能响应。

2) 没有 class 名称使列并排，即 .s6、.m6 .l6 等

3) 第一个 select.

后缺少结束 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>

Codepen.

select 下拉菜单具体化 css 全宽

select dropdown materialize css full width

css

materialize