Проблема с сеткой Bootstrap 4 с тегом div

Question

Проблема сетки 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>

это должно выглядеть как

но желаемый вывод не такой. Это связано с использованием элемента div с идентификатором <div id="divProvinces" style="">. Можете ли вы предложить какую-либо другую альтернативу?

Answer 1

Если вам нужно сохранить внешние divProvinces, сделайте его 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>

https://www.codeply.com/go/KbyHM2KNBS