Bootstrap折叠多个嵌入行

Question

引导程序和列/行上的快速问题。我有一个级联效应，有经理，然后是员工，然后是员工家属。

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

我在底部here

运行我的代码时，得到这样的结果，但我需要这个result

我知道这是不是achieveable与我当前的代码...任何建议？

在此先感谢！

<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

而不是将列的内部行，你就必须让一帮行的在同一水平上，而不是。否则，新行将只是它所在列的宽度。另外，如果需要，还可以使用容器流体使其全宽。

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