Question

关于引导程序和列/行的快速问题。我有一个级联效应，包括经理，然后是员工，然后是员工家庭成员。

问题在于我没有完全了解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

不是将行放在列中，而是必须在同一级别上创建一堆行。否则新行只会是它所放置的列的宽度。另外，如果你愿意的话，容器流体可以使它完全全宽。

＆＃13;

<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>

＆＃13;

多个嵌入式行的Bootstrap折叠

1 个答案: