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

问题描述 投票:0回答:1

我在使用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>

请协助谢谢!!!!!!!!!。

css materialize
1个回答
1
投票

你使用了12列布局,并设置了每一列的宽度。divm6 这意味着在中等屏幕上有6列。

你将会有你使用 m4 因为12 3 = 4

更多信息。https:/materializecss.comgrid.html

© www.soinside.com 2019 - 2024. All rights reserved.