Bootstrap 5.2＆＃x27; form-loploating＆＃x27;班级问题/问题

Question

我正在使用Bootstrap 5.2，并且有一个包含以下表单段的表单：

<div class="row mb-2 align-items-center">
                        <div class="col-sm-4">
                            <label class="checkbox-inline" for="Credit_Pulled">Credit Pulled</label>
                            <input type="checkbox" class="form-check-inline" value="1" name="Credit_Pulled" id="Credit_Pulled">
                        </div>
                        <div class="col-sm-4">
                            <label class="checkbox-inline" for="Is_On_Terms">Approved For Terms</label>
                            <input type="checkbox" class="align-middle" value="true" name="Is_On_Terms" id="Is_On_Terms">
                        </div>
                        <div class="col-sm-4 form-floating">
                            <label for="Terms_Days">Terms Period</label>
                            <select class="form-select form-control d-flex" id="Terms_Days" name="Terms_Days">
                                <option value="0" selected>NONE</option>
                                <option value="30">NET-30</option>
                                <option value="60">NET-60</option>
                                <option value="90">NET-90</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-sm-4 form-floating">
                            <label for="Credit_Limit">Approved Limit</label>
                            <input type="text" class="form-control d-flex" id="Credit_Limit" name="Credit_Limit">
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-sm-12 w-100 form-floating">
                            <label for="Review_Notes">Review Notes</label>
                            <textarea class="form-control rounded" rows="8" id="Review_Notes" name="Review_Notes"></textarea>
                        </div>
                    </div>

当我查看表单时，这就是我得到的：

问题是，问题是表单标签及其内容重叠。有什么方法（即使添加自定义CSS）可以防止这种情况清洁显示？

Answer 1

Bootstrap文档说＆lt; label＆gt;需要在＆lt; input＆gt; https://getbootstrap.com/docs/5.0/forms/floating-labels/