Question

我创建了一行，其中一列（col-lg-12），另一行创建了两列（col-lg-12）。我注意到在小型设备中，第一行与第二行没有正确对齐

    <div class="container">  
     <!------------------------------------ first section-------------------------------------------------->
     <div class="row" id="firstSection">
         <div class="col-lg-12">
            <span class="glyphicon glyphicon-tree-deciduous"></span>
           <h2 class="heading2">Your home away from home</h2>
           <h4>Prima luce, cum quibus mons aliud consensu ab eo. Praeterea iter est quasdam res ex<br/>communi.Etiam habetis sem dicantur magna mollis euismod.</h4>
           <p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolorem id in inventore, maiores consequuntur modi? Omnis dolore quam vel. Illo accusantium, porro laudantium saepe necessitatibus id ullam voluptate nihil!<br/></p> 
         </div>
    </div>
     <!------------------------------------ end of first section-------------------------------------------------->

     <!------------------------------------ second section--------------------------------------------------> 
    <div class="row" id="secondSection">
            <div class="col-lg-6">
                <article class="section1">                             
                    <span class="glyphicon glyphicon-tree-deciduous"></span>
                    <h2>BUSINESS TRAVELLER</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! and fre</p>
                    <button type="button" class="btn btn-default">READ MORE</button>              
                </article>      
            </div><!--  end of column --->

            <div class="col-lg-6">
                <section class="section2">
                    <span class="glyphicon glyphicon-tree-deciduous"></span>
                    <h2>ACCOMPANYING A LOVED-ONE</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>
                    <button type="button" class="btn btn-default">READ MORE</button>
                </section>
            </div><!--  end of column --->       
     </div><!-- row -->!>
      <!------------------------------------ end of second section------------------------------------------->
</div><!-- end of container -->

以下是css代码

   #firstSection{
   background-color:#ffffff;
   margin-left:12px;
   margin-right:12px;
   padding-top: 120px;
   margin-top:-80px;   
   }

   .section1{
   background: #ffffff;
   padding: 50px;
   margin-top:30px;
   margin-left:px;
   }
   .section2{
    background: #ffffff;
    padding: 50px;
    margin-left:20px;
    margin-top:30px;
    }

Answer 1

更改您的<div>声明如下

<div class="col-lg-12 col-xs-12"> <!-- this will align the element in the same manner on small screen as it would have on larger screens -->

对于相同的对齐，不要向这些div添加任何边距或填充

引导响应列

1 个答案: