創建一個包含兩列的行

Question

在下面的代碼中，我試圖創建一個包含兩列的行，其中每一節應屬於一列。無法成功。

<div class="container"> 
     <section> 
      <div class="row"> 
       <div class="col-lg-6"> 
        <section> 
         <h2>THIS is heading 2.1</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi!</p> 
        </section> 

        <section> 
         <h2>THIS is heading 2.2</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi!</p> 
        </section> 
       </div>  
     </div><!-- row --> 
     </section> 
    </div><!-- end of container --> 

我該如何解決問題？

Answer 1

當您想要某個部分屬於某個列時，請將該部分插入列中。重複第二部分的步驟。

你可以有這樣的邏輯有一排兩列：

row 
    column 
    section 
    column 
    section 

最終代碼：

<div class="container"> 
    <section> 
     <div class="row"> 
     <!---- First section in the first column  ---------> 
      <div class="col-lg-6"> 
       <section> 
        <h2>THIS is heading 2.1</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi!</p> 
       </section> 
      </div> 

     <!---- Second section in the second column  ---------> 
      <div class="col-lg-6"> 
       <section> 
        <h2>THIS is heading 2.2</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi!</p> 
       </section> 
      </div>  
    </div><!-- row --> 
    </section> 

Answer 2

您必須對多列使用section內使用divdiv。

<div class="row"> 
    <!-- First section ---> 
     <div class="col-sm-6"> 
      <section> 
       <h1>first section</h1> 
      </section> 
     </div> 

    <!-- Second section --> 
     <div class="col-sm-6"> 
      <section> 
       <h1>second section</h1>  
      </section> 
     </div>  
    </div>