如何用数组在Bootstrap中创建下拉菜单？解决区域布局错乱问题

我懂你遇到的麻烦了——当某个State下属的City数量过多时，会把所在的列撑得很高，导致同一行的其他State列对齐得乱七八糟。咱们可以用Bootstrap的折叠（Collapse）组件把City列表藏起来，需要的时候再展开，这样就能稳稳保住页面的行列布局啦。

下面是修改后的home.blade.php代码，关键改动我都标出来了：

<div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                @foreach ($areas as $country)
                    <div class="col-md-12">
                        <h3><a href="{{ route('user.area.store', $country) }}">{{ $country->name }}</a></h3>
                        <hr>
                        <div class="row">
                            @foreach ($country->children as $state)
                                <div class="col-md-4 mb-4"> <!-- 给每个State列加底部间距，优化视觉体验 -->
                                    <!-- State标题 + 折叠触发按钮 -->
                                    <h4>
                                        <a href="{{ route('user.area.store', $state) }}">{{ $state->name }}</a>
                                        <button 
                                            class="btn btn-sm btn-outline-secondary ml-2" 
                                            type="button" 
                                            data-toggle="collapse" 
                                            data-target="#city-collapse-{{ $state->id }}" 
                                            aria-expanded="false" 
                                            aria-controls="city-collapse-{{ $state->id }}"
                                        >
                                            {{ $state->children->count() > 0 ? '▼' : '' }}
                                        </button>
                                    </h4>
                                    <hr>
                                    <!-- 可折叠的City列表 -->
                                    <div class="collapse" id="city-collapse-{{ $state->id }}">
                                        <div class="pl-3 mb-2"> <!-- 缩进城市列表，让层级关系更清晰 -->
                                            @foreach ($state->children as $city)
                                                <h5><a href="{{ route('user.area.store', $city) }}">{{ $city->name }}</a></h5>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

关键改动说明： #

• 折叠组件集成：用Bootstrap原生的collapse类和data-toggle属性实现下拉效果，每个State的折叠面板用$state->id生成唯一ID，避免不同State的折叠面板冲突。
• 布局细节优化：给每个State列添加mb-4类（Bootstrap间距类），避免内容挤在一起；给城市列表加pl-3缩进，让层级关系一目了然。
• 动态按钮控制：只有当State有下属City时才显示折叠按钮，空State不会出现多余的按钮，更简洁。

这样修改后，不管某个State有多少个City，默认都会隐藏起来，完全不会打乱页面的行列布局，用户点击按钮就能展开查看所有City啦。

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