html - 如何在Bootstrap中创建重叠的div

我正在尝试在Bootstrap中创建以下布局。我猜想在移动版本中它们会相互堆叠。但是我在白色背景框上方的紫色框上遇到问题。



到目前为止，这就是我所拥有的。
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>

最佳答案

在检查了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;
 }

关于html - 如何在Bootstrap中创建重叠的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40874998/