Bootstrap 4 带div标记的引导4网格问题

Bootstrap 4使用div时出现网格问题，无法生成正确的输出

这是我的密码：

<div class="container mt-3">
    <div class="row">
        <div class="col-md-2">
            <label>Country <span class="required-span"> * </span></label>
        </div>
        <div class="col-md-4">
            <select class="form-control valid" data-val="true" id="Country" name="Country" style="color:black">
                <option value="">----Select----</option>
                <option value="22" data-abbreviation="BELG" data-province="True">Belgium</option>
            </select>
            <span class="field-validation-valid text-danger" data-valmsg-for="Country" data-valmsg-replace="false" style="display:none">Country is required.</span>
        </div>
        <div id="divProvinces" style="">
            <div class="col-md-4">
                <label>Provinces<span class="required-span"> * </span></label>
            </div>
            <div class="col-md-8">
                <select class="form-control" id="District" name="District" style="color:gray;font-style:italic;font-size: 14px;"><option value="">--Select--</option><option value="1">Antwerp</option></select>
                <span class="field-validation-valid text-danger" data-valmsg-for="District" data-valmsg-replace="false" style="display:none">Provinces is required.</span>
            </div>
        </div>
    </div>
</div>

国家*
----挑选----
比利时
国家是必需的。
各省*
--选择——安特卫普
省是必需的。

这应该表现为

---

但是期望的输出不是这样的。这是由于使用了id为

的div元素，您可以建议其他替代方法吗？

如果必须保留外部div，请将其设置为

col-md-6

，然后嵌套右侧列

<div class="container mt-3">
    <div class="row">
        <div class="col-md-2">
            <label>Country <span class="required-span"> * </span></label>
        </div>
        <div class="col-md-4">
            <select class="form-control valid" data-val="true" id="Country" name="Country" style="color:black">
                <option value="">----Select----</option>
                <option value="22" data-abbreviation="BELG" data-province="True">Belgium</option>
            </select>
            <span class="field-validation-valid text-danger" data-valmsg-for="Country" data-valmsg-replace="false" style="display:none">Country is required.</span>
        </div>
        <div id="divProvinces" style="" class="col-md-6">
            <div class="row">
                <div class="col-md-4">
                    <label>Provinces<span class="required-span"> * </span></label>
                </div>
                <div class="col-md-8">
                    <select class="form-control" id="District" name="District" style="color:gray;font-style:italic;font-size: 14px;">
                        <option value="">--Select--</option>
                        <option value="1">Antwerp</option>
                    </select>
                    <span class="field-validation-valid text-danger" data-valmsg-for="District" data-valmsg-replace="false" style="display:none">Provinces is required.</span>
                </div>
            </div>
        </div>
    </div>
</div>

国家*
----挑选----
比利时
国家是必需的。
各省*
--挑选--
安特卫普
省是必需的。