在 react html5 应用程序中，如何并排放置 3 个选择列表？

Question

I'm building a react page using Gatsby, and a premade template. I'm trying to build a form, and put 3 select lists side by side, since the contents are small. But it keeps stacking them vertically. I've tried to add additional css to overwrite what the template is doing, but it isn't working.

elements.js:

    <div className="col-12">
        <div className="select-wrapper mb-5">
            <select name="demo-category1" id="demo-category1">
                <option defaultValue="">- Category -</option>
                <option value="1">Cat1</option>
                <option value="2">Cat2</option>
            </select>
        </div>
        <div className="select-wrapper mb-5">
            <select name="demo-category2" id="demo-category2">
                <option defaultValue="">- Category -</option>
                <option value="1">Cat1</option>
                <option value="2">Cat2</option>
            </select>
        </div>
        <div className="select-wrapper mb-5">
            <select name="demo-category3" id="demo-category3">
                <option defaultValue="">- Category -</option>
                <option value="1">Cat1</option>
                <option value="2">Cat2</option>
            </select>
        </div>
    </div>

In my _form.scss:

    .select-wrapper {
        @include icon;
        display: block;
        position: relative;

        &:before {
            color: _palette(border);
            content: '\f078';
            display: block;
            height: _size(element-height);
            line-height: _size(element-height);
            pointer-events: none;
            position: absolute;
            right: 0;
            text-align: center;
            top: 0;
            width: _size(element-height);
        }

        select::-ms-expand {
            display: none;
        }
    }

    .demo-category1, .demo-category2, .demo-category3{
        width: 33% !important;
        display: inline-block !important;
        margin-right: 50px !important;
    }

Answer 1

Just put display: flex on the container of select boxes to make them horizontal

(I changed the className="col-12" to class="col-12" to make the fiddle work)

 .col-12 { display: flex; }

 <div class="col-12"> <div className="select-wrapper mb-5"> <select name="demo-category1" id="demo-category1"> <option defaultValue="">- Category -</option> <option value="1">Cat1</option> <option value="2">Cat2</option> </select> </div> <div className="select-wrapper mb-5"> <select name="demo-category2" id="demo-category2"> <option defaultValue="">- Category -</option> <option value="1">Cat1</option> <option value="2">Cat2</option> </select> </div> <div className="select-wrapper mb-5"> <select name="demo-category3" id="demo-category3"> <option defaultValue="">- Category -</option> <option value="1">Cat1</option> <option value="2">Cat2</option> </select> </div> </div>