如何让表单内复选框选项列表自动换行且不超表单宽度

你可以通过调整容器的布局样式，让选项列表自动换行且不超出表单宽度，以下是两种可行方法：

方法一：使用Bootstrap内置类（无需额外CSS） #

直接替换原有的form-check-inline类为Bootstrap的flex布局类，利用内置样式实现自动换行：

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <legend class="form-label">Votre profession<i class="note-form">*</i></legend>
            <!-- 替换form-check-inline为d-flex flex-wrap gap-2 -->
            <div class="d-flex flex-wrap gap-2" id="profession_emprunteur">
                <div class="form-check">
                    <input class="radio-special form-check-input" id="profession_emprunteur_0" name="profession_emprunteur" required="required" type="radio" value="employe"/>
                    <label class="form-check-label required font-normal label-special" for="profession_emprunteur_0">Employé</label>
                </div>
                <div class="form-check">
                    <input class="radio-special form-check-input" id="profession_emprunteur_1" name="profession_emprunteur" required="required" type="radio" value="fonctionnaire"/>
                    <label class="form-check-label required font-normal label-special" for="profession_emprunteur_1">Fonctionnaire</label>
                </div>
                <div class="form-check">
                    <input class="radio-special form-check-input" id="profession_emprunteur_2" name="profession_emprunteur" required="required" type="radio" value="cadre"/>
                    <label class="form-check-label required font-normal label-special" for="profession_emprunteur_2">Cadre</label>
                </div>
                <!-- 更多选项 -->
            </div>
        </div>
    </div>
</div>

• d-flex：启用flex布局
• flex-wrap：当内容超出容器宽度时自动换行
• gap-2：控制选项之间的间距（可根据需求调整为gap-1/gap-3等）

方法二：自定义CSS样式 #

如果需要更灵活的控制，可以保留原form-check-inline类，通过自定义CSS覆盖默认样式：

#profession_emprunteur {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* 自定义选项间距 */
    width: 100%; /* 确保容器不超出父元素宽度 */
}

#profession_emprunteur .form-check {
    min-width: 120px; /* 可选：设置选项最小宽度，避免过窄 */
}

这样修改后，选项列表会根据容器宽度自动换行，且整体始终保持在表单的100%宽度范围内。

内容的提问来源于stack exchange，提问作者mbyou