html - Bootstrap 折叠多个嵌入式行

Question

关于 bootstrap 和列/行的快速问题。我有一个级联效应，先是经理，然后是员工，然后是员工家庭成员。

问题是我没有完全理解 bootstrap 以及它如何使用列/行。

我在底部运行代码时得到了这个结果 here

但我需要这个result

我知道这无法通过我当前的代码实现...有什么建议吗？

提前致谢!

<div class="container">
    <div class="row">
        @{i++;}
        <div class="col-md-4">
            <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#@i">Manager Name</button>
            <div id="@i" class="collapse">
                <div class="row">
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-10">
                        <h5>Employees</h5>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-8">
                        j++;
                            <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#@j">Employee Name</button>
                            <br />
                            <div id="@j" class="collapse">

                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-8">
                                        <h5>Employee Fam Members</h5>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-8">
                                         @Html.ActionLink(Employee Fam Member Name, blah, blah)
                                    </div>
                                </div>
                                <br />
                            </div>
                            <br />
                    </div>
                    <div class="col-md-2">

                        <br />
                        <br />

                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-1">
            Edit Button    
        </div>

        <div class="col-md-7">
            Delete Button 
        </div>

    </div>
    <br />

Answer 1

您不必将行放在列内，而是必须在同一层级制作一堆行。否则，新行只会是它所在列的宽度。此外，如果您愿意，可以使用 container-fluid 使其完全宽度。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#i">Manager Name</button>
        </div>
        <div class="col-md-1">
            Edit Button    
        </div>
        <div class="col-md-7">
            Delete Button 
        </div>
    </div>
    <div id="i" class="collapse">
       <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-10">
                <h5>Employees</h5>
            </div>
       </div>
        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-8">
              <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#j">Employee Name</button>
            </div>
       </div>   
    </div>
    <div id="j" class="collapse">
        <div class="row">
            <div class="col-md-4">
            </div>
            <div class="col-md-8">
                <h5>Employee Fam Members</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
            </div>
            <div class="col-md-8">
                 @Html.ActionLink(Employee Fam Member Name, blah, blah)
            </div>
        </div>                                
    </div>
</div>