Bootstrap 4网格系统不匹配

Question

我正在尝试实现以下目标：

我为此编写的代码如下：

f'No. of Upper case characters: {d["upper"]}'

但是，在某个地方似乎不匹配，并且第二父级列 <div class="col-md-7"> <!-- Donor Name --> <div class="md-form"> <i class="fas fa-user prefix red-text"></i> <input type="text" name="donorname" class="form-control"> <label for="donorname">Donor's Name</label> </div> <div class="row"> <div class="col-md-6"> <!-- Blood Group --> <div class="md-form"> <select class="form-control selectpicker" data-live-search="true" id="bloodgroup"> <option value="0">Select Blood Group</option> <option value="1">A +</option> <option value="2">A -</option> <option value="3">B +</option> <option value="4">B -</option> <option value="5">AB +</option> <option value="6">AB -</option> <option value="7">O +</option> <option value="8">O -</option> </select> </div> </div> <div class="col-md-5"> <!-- DOB --> <div class="md-form"> <i class="fas fa-calendar prefix red-text"></i> <input placeholder="Selected date" type="date" name="donordob" class="form-control datepicker"> </div> </div> </div> </div> <div class="col-md-6"> <!--Textarea with icon prefix--> <div class="md-form"> <i class="fas fa-pencil-alt prefix"></i> <textarea id="form10" class="md-textarea form-control" rows="2"></textarea> <label for="form10">Medical Issues</label> </div> </div> 似乎下降了。 有人可以建议我在哪里出错了吗？

任何建议都会有所帮助

Answer 1

Bootstrap 正在使用12列网格系统。因此，如果您的栏目总数超过12，则每组额外的栏目都会换行：

https://getbootstrap.com/docs/4.3/layout/grid/#column-wrapping

因此，解决问题的方法只是将父列从.col-md-6更改为.col-md-5：

<div class="row">
    <div class="col-md-7">
        ...
    </div>
    <div class="col-md-5">
        <!--Textarea with icon prefix-->
        <div class="md-form">
            <i class="fas fa-pencil-alt prefix"></i>
            <textarea id="form10" class="md-textarea form-control" rows="2"></textarea>
            <label for="form10">Medical Issues</label>
        </div>
    </div>
</div>

演示： https://jsfiddle.net/davidliang2008/9brxyau8/2/