Bootstrap вложенные столбцы

Question

Я пытаюсь гнездо 2 столбца во второй строке контейнера с использованием code snippet from the official documentation

When I try the same code, столбцы отображаются в виде отдельных строк, появляющиеся один за другим & не как 2 столбцов в одной и той же строке. Что я делаю не так?

Answer 1

Вы закрываете первый столбец, а затем следуете ему двумя новыми строками, когда я предполагаю, что вы хотите, чтобы следующие строки были вложены в столбец. Следующие изменения должны делать то, что вы хотите, если я правильно интерпретировать ваши потребности

<div class="row"> 
    <div class="col‐sm‐12 col-xs-12" style="background-color:red"> 
     Level 1: .col‐sm‐9 <!-- Removed </div> --> 
     <div class="row"> 
      <div class="col-sm-6 col-xs-8" style="background-color:yellow"> 
       Level 2: .col‐xs‐8 .col‐sm‐6 bs bs bs bs bs bs bs 
      </div> 
      <div class="col-sm-6 col-xs-4" style="background-color:grey"> 
       Level 2: .col‐xs‐4 .col‐sm‐6 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-6 col-xs-8" style="background-color:yellow"> 
       Level 3a: .col‐xs‐8 .col‐sm‐6 bs bs bs bs bs bs bs bs bs bs bs bs bs bs 
      </div> 
      <div class="col-sm-6 col-xs-4" style="background-color:grey"> 
       Level 3b: .col‐xs‐4 .col‐sm‐6 
      </div> 
     </div> 
    </div><!-- Added --> 
</div> 

Answer 2

попробовать это один - я думаю, что он подходит для вашей проблемы:

<div class="container-fluid"> 
    <div class="col-lg-12"> 
     <div class="row"> 
     <div class="col-sm-6"> 
      <div class="well"> 
       <p>First Part</p> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <div class="well"> 
       <p>Second Part</p> 
      </div> 
     </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <div class="well"> 
       <div class="row"> 
        <div class="col-md-6"> 
        <div class="well"> 
        <p>Nested 1</p> 
        </div> 
        </div> 
        <div class="col-md-6"> 
        <div class="well"> 
        <p>Nested 2</p> 
        </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-6"> 
        <div class="well"> 
        <p>Nested 3</p> 
        </div> 
        </div> 
        <div class="col-md-6"> 
        <div class="well"> 
        <p>Nested 4</p> 
        </div> 
        </div> 
       </div> 
      </div> 

      </div> 
      <div class="col-sm-6"> 
       <div class="well"> 
       <p>Fourth Part[enter image description here][1]</p> 
       </div> 
       </div> 
      </div> 
    </div>      
</div>