如何在引導程序中創建重疊的div div

Question

我正嘗試在引導程序中創建以下佈局。我猜想在移動版本中，他們會互相疊加。但是我在白色背景框上方的紫色框中遇到問題。

這是我到目前爲止所。 Link to Fiddle

<section class="light-gray" style="margin-top:60px;"> 
    <div class="container"> 
    <div class="row"> 
     <div class="spacer-40"></div> 
     <div class="spacer-40"></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12 clearfix white"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-5 col-sm-offset-1 pull-right purple color-box"> 
      <p>Want to know how product name can upgrade your profession?</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="spacer-40"> 
      </div> 
      <div class="col-sm-6"> 
      <div class="row textblock"> 
       <p> 
       Short description about free demo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet 
       risus. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. 
       </p> 
      </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="text-right button-container"> 
      more information <a href="#" class="button button-icon gray"><span class="fa fa-arrow-right"></span></a> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="spacer-40"> 
     </div> 
     <div> 
     </div> 
    </div> 
    </div> 
</section> 

Answer 1

審查您的jsfiddle後，我注意到你有很多行。我將它縮小到只有兩行，併爲md和lg查看設置列間距，所以現在，如果在平板電腦設備上查看，並且設備的尺寸會越來越大，則設備將彼此相鄰排列。

但是，在移動視圖中，紫色div低於文本以維持響應式佈局。

這是一個jsFiddle帶有示例更新代碼。

希望幫助

更新的HTML

<section class="light-gray"> 
    <div class="container"> 
    <div class="row">   
     <div class="col-md-6 col-lg-6"> 
     <div class="textblock"> 
      <p> 
      Short description about free demo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet 
      risus. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. 
      </p> 
      <p> 
      Short description about free demo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet 
      risus. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. 
      </p> 
     </div><!--/.textblock--> 
    </div><!--/.cols--> 
    <div class="col-md-6 col-lg-6 purple color-box"> 
    <p>Want to know how product name can upgrade your profession?</p> 
    </div><!--/.cols--> 
</div><!--/.row--> 
<div class="row"> 
<div class="text-right button-container"> 
    more information <a href="#" class="button button-icon gray"><span class="fa fa-arrow-right"></span></a> 
</div><!--/.text-right--> 
</div><!--/.row--> 
</div><!--/.container--> 
</section> 

修訂CSS

@import url('https://fonts.googleapis.com/css?family=Fira+Sans'); 
.light-gray { 
    background: #CCC; /*could not see the grey that was provided */ 
} 

.white { 
    background: #FFFFFF; 
} 

.gray { 
    background: #474747; 
} 

.purple { 
    background: #940c72; 
    } 

.spacer-40 { 
    width: 100%; 
    height: 40px; 
} 

.color-box { 
    padding: 60px; 
    right: 0; 
    font-family: Times, serif; 
    font-size: 1.85em; 
    font-style: italic; 
    color: white; 
} 

.textblock { 
    font-family: 'Fira Sans', Helvetica, sans-serif; 
} 

a { 
color: #007ac3; 
text-decoration: none; 
cursor: pointer; 
-webkit-transition: color 0.1s ease-out; 
transition: color 0.1s ease-out; 
} 

.button-container { 
    padding-top: 15px; 
} 

.button-container { 
    padding-right: 0px; 
} 

.button { 
    -webkit-transition: background-color 0.1s ease-out; 
    transition: background-color 0.1s ease-out; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background-color: #007ac3; 
    border: 0; 
    border-radius: 0; 
    color: #fff; 
    font-family: 'Fira Sans', Helvetica, sans-serif; 
    font-size: 0.87891rem; 
    font-weight: 400; 
    line-height: 1; 
    margin-bottom: 1rem; 
    padding: 1.0625rem 0.9375rem; 
    -webkit-tap-highlight-color: transparent; 
    -ms-touch-action: manipulation; 
    touch-action: manipulation; 
    width: 100%; 
} 

[class^="icon-"]:before, 
[class*=" icon-"]:before { 
    display: inline-block; 
    font-family: 'FontAwesome'; 
    font-smoothing: grayscale; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: normal; 
    line-height: 1em; 
    margin-left: .2em; 
    margin-right: .2em; 
    speak: none; 
    text-align: center; 
    text-decoration: inherit; 
    text-transform: none; 
    width: 1em; 
} 

.icon-arrow-right:before { 
    content: '\e80b'; 
} 

.button .button-icon { 
    color: #ffffff; 
    font-size: 1.25rem; 
    padding: 0.75rem 0.5rem; 
    margin-bottom: 0; 
} 

.button-container a.button { 
    display: inline-block; 
    text-align: center; 
    width: auto; 
}