Bootstrap 网格一个完整的列和 2 个堆积的列

Question

在Bootstrap，我们可以做这样的事情吗？首先是一个完整的列，旁边是两个堆叠的列。我尝试了嵌套网格，但它不起作用。

Answer 1

试试这个

   <div class="row">
      <div class="col-sm-6">
        Content
      </div>
      <div class="col-sm-6">
        <div class="row">
           <div class="col-sm-12">
             Content2
           </div>
        </div>
        <div class="row">
           <div class="col-sm-12">   
             Content3
           </div>
         </div> 
      </div>
    </div>

Answer 2

试一试this.i如果答案正确会有解释

  <div class="row ">
      <div class="col-md-6 col-sm-6 p-0">
         <div class="bg-dark">
            my life its always null..
         </div>
      </div>

      <div class="col-md-6 col-sm-6 p-0 ">
         <div class="row ">
            <div class="col-sm-12 bg-primary ">
               THE Iternal Love 1
            </div>
            <div class="col-sm-12 bg-primary ">
               THE Iternal Love 2
            </div>

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

Bootstrap 网格一个完整的列和 2 个堆积的列

Bootstrap grid one full column and 2 stacked columns

css

angular-ui-bootstrap

bootstrap-4