Bootstrap Réduire avec plusieurs lignes intégrées

Question

Question rapide sur bootstrap et colonnes/lignes. J'ai un effet de cascade qui a des gestionnaires, puis des employés, puis des membres de la famille des employés.

Le problème est que je n'ai pas une compréhension complète de bootstrap et comment il utilise des colonnes/lignes.

-je obtenir ce résultat lors de l'exécution de mon code en bas here

Mais je besoin de cette result

Je sais que ce n'est pas achieveable avec mon code actuel ... Des suggestions?

Merci d'avance!

<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

Plutôt que de mettre les lignes à l'intérieur des colonnes, vous devrez faire un tas de lignes au même niveau au lieu. Sinon, les nouvelles lignes ne seront que la largeur de la colonne dans laquelle il a été placé. En outre, le conteneur-fluide pour le rendre entièrement pleine largeur si vous le souhaitez.

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