Question

我正在尝试在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>

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

如何在Bootstrap中创建重叠的div

1 个答案: