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

您必须使用div多个列使用section内的div。

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

创建一个包含两列的行

2 个答案: