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

我正在使用盖茨比和一个预制模板构建一个react页面。我试图构建一个表单，并将3个选择列表并排放置，因为内容很小。但它一直在垂直堆叠它们。我试图添加额外的css来覆盖模板正在做的事情，但它不起作用

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>

---

只需将

display:flex

放在选择框的容器上，使其水平

（我将className=“col-12”更改为class=“col-12”以使小提琴工作）

.col-12{
显示器：flex；
}

-类别-
第一类
第二类
-类别-
第一类
第二类
-类别-
第一类
第二类

只需将

display:flex

放在选择框的容器上，使其水平

（我将className=“col-12”更改为class=“col-12”以使小提琴工作）

.col-12{
显示器：flex；
}

-类别-
第一类
第二类
-类别-
第一类
第二类
-类别-
第一类
第二类

    .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;
    }