如何用Bootstrap行-列组件展示多级层级结构？

当前代码的核心问题是Bootstrap的row和col结构嵌套逻辑错误，导致子节点无法按预期在同一行排列。以下是修正后的完整代码：

修正后的View代码 #

@model List<HelloWorldMvcApp.ScriptHierarchy>
@{
    Layout = null;
}

@helper RenderNode(ScriptHierarchy node)
{
    <div class="col">
        <button type="button" class="btn btn-primary btn-block">@node.Title</button>
        @if (node.Children.Any())
        {
            <div class="row mt-2">
                @foreach (var child in node.Children)
                {
                    @RenderNode(child)
                }
            </div>
        }
    </div>
}

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>层级结构展示</title>
</head>
<body>
    @using (Html.BeginForm())
    {
        <div class="container mt-4">
            @foreach (var rootNode in Model.Where(x => x.Level == 1))
            {
                <div class="row">
                    @RenderNode(rootNode)
                </div>
            }
        </div>
    }

    <!-- jQuery and Bootstrap Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>

关键修改说明 #

• 重构辅助方法：将原PopulateChild改为RenderNode，采用递归嵌套的正确结构，每个节点包裹在col中，子节点统一放在同一个row内，确保同一父级的子节点在同一行排列
• 移除错误DOM操作：删除原代码中@Html.Raw("</div>")这类破坏标签嵌套的手动操作，让Razor自动处理DOM结构
• 优化视觉层次：给子节点的row添加mt-2类，增加垂直间距提升可读性
• 简化根节点渲染：根节点直接放入row后递归渲染所有子节点，逻辑更简洁直观

修正后布局将完全匹配预期：根节点单独一行，二级节点占据整行，三级节点横向排列，四级节点在对应父节点下方的列位置垂直展开。

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