创建一个包含两列的行

在下面的代码中，我试图创建一个包含两列的行，其中每一节应属于一列。无法成功。创建一个包含两列的行

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

我该如何解决问题？

来源

2016-05-16 Sidney Sousa

当您想要某个部分属于某个列时，请将该部分插入列中。重复第二部分的步骤。

你可以有这样的逻辑有一排两列：

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>

来源

2016-05-16 09:34:49 stackoverflowery

谢谢。它工作完美 –

您必须对多列使用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>

来源

2016-05-16 16:46:07

创建一个包含两列的行

回答

相关问题