并排对齐 3 个输入字段 Materialize.css

Question

我正在使用 materialize.css，我有 2 个输入字段和一个范围，我希望它们都并排显示。我设法让两个输入字段位于同一行，但范围一个是堆叠的。这是我的代码

<div className="container">
            <div className="row">
                <div className="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>
                <div className="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 className="col s12 m6">
                    <div className="range-field col s12 m6">
                        <input type="range" id="test5" min="0" max="100"/>
                    </div>
                </div>
            </div>
        </div>

请帮忙谢谢!!

Answer 1

您使用 12 列布局并将每个 div 的宽度设置为 m6，这意味着在中等屏幕上有 6 列。

你会让你使用 m4 因为 12 / 3 = 4

更多信息：https://materializecss.com/grid.html

并排对齐 3 个输入字段 Materialize.css

align 3 input fields side by side Materialize.css

css

materialize