如何实现每行对齐排列4个复选框且超出后自动换行

问题根因 #

你当前使用的是Bootstrap栅格系统，存在两个核心错误导致布局不符合预期：

• 包裹复选框的col-*元素外层缺少row容器，栅格默认的间距、换行规则无法正常生效
• 你设置的col-lg-4表示大屏下每个元素占4列宽度，Bootstrap栅格总宽度为12列，12/4=3，自然只能实现每行3个元素的布局

修复方案（基于Bootstrap栅格，改动最小） #

步骤1：给复选框容器外层加row #

在<div class="col-sm-8 col-xs-8">内部加一层<div class="row">包裹所有复选框的col元素。

步骤2：调整列宽实现每行4个 #

每行4个元素对应每个元素占3列（12/4=3），将原来的col-lg-4改为col-lg-3，可根据响应式需求调整其他断点的列宽，比如中等屏幕每行3个、小屏幕每行2个可配置为col-lg-3 col-sm-4 col-xs-6。

修正后完整代码 #

<div class="form-group">
    <div class="row">
        <label for="form-id" class="col-sm-4 col-xs-4 control-label">그룹</label>
        <div class="col-sm-8 col-xs-8">
            <!-- 新增row容器 -->
            <div class="row">
                <?php foreach ( $memberGroupList as $memberGroup ) { ?>
                    <!-- 调整列宽为col-lg-3，按需修改其他断点配置 -->
                    <div class="col-lg-3 col-sm-4 col-xs-6">
                        <?php if (in_array($memberGroup->getId(),$arrMemberMemberGroup)) { ?>
                            <input class="form-check-input" type="checkbox" name="memberGroupId[]" value="<?php echo $memberGroup->getId()?>" checked > <?php echo $memberGroup->getName()?>
                        <?php } else { ?>
                            <input class="form-check-input" type="checkbox" name="memberGroupId[]" value="<?php echo $memberGroup->getId()?>"  > <?php echo $memberGroup->getName()?>
                        <?php } ?>
                    </div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>

可选替代方案（自定义Flex布局，不依赖Bootstrap栅格） #

如果不想受Bootstrap栅格限制，可以自行写Flex布局实现，灵活度更高：

1. 给复选框的父容器加自定义类，比如checkbox-group-wrap
2. 增加CSS样式：

.checkbox-group-wrap {
    display: flex;
    flex-wrap: wrap;
    /* 可选：调整元素间距 */
    gap: 10px 0;
}
.checkbox-group-wrap .checkbox-item {
    /* 每行4个对应25%宽度，减去间距偏移量即可 */
    width: 25%;
    box-sizing: border-box;
    padding-right: 15px;
}
/* 响应式适配，小屏幕每行2个 */
@media (max-width: 768px) {
    .checkbox-group-wrap .checkbox-item {
        width: 50%;
    }
}

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