Question

使用div时出现Bootstrap 4网格问题，它不会生成正确的输出。

这是我的代码：

source ~./zshrc

这应显示为

，但所需的输出不是这样。这是由于使用ID为<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元素引起的，您能提出其他建议吗？

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

带有div标签的Bootstrap 4网格问题

1 个答案: