在旋转木马顶部划分

Question

我正在尝试使用bootstrap 4构建以下布局，我想在全屏幕上旋转木马顶部的div我希望它向左拉，中间尺寸屏幕在中心和移动屏幕尺寸我希望它坐在旋转木马下面，如下图所示：

到目前为止，我已尝试将其放入列中，但正如您在我的代码中所看到的那样，该列与下面的内容的宽度并不相同，而且无论我尝试了什么，它都会成为旋转木马项目较小或只是没有工作。

https://codepen.io/anon/pen/KQvJQp

＆＃13;

＆＃13;

#mu-carousel .carousel-item {
  max-height: 540px;
  max-width: 100%;
}

#mu-carousel .carousel-box {
  background: #333333;
  text-align: left;
}

#mu-promo {
  background: #eeeeee;
  min-height: 500px;
}

＆＃13;

<header id="mu-carousel" class="">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img class="d-block img-fluid" src="https://static.pexels.com/photos/312105/pexels-photo-312105.jpeg" alt="First slide">
        <div class="carousel-caption d-none d-md-block offset-1 col-lg-3  carousel-box">
          <h3>TITLEH3</h3>

          <p>Lorem ipsum </p>
          <a href="#" class="btn btn-info">Call to action</a>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="https://static.pexels.com/photos/312105/pexels-photo-312105.jpeg" alt="Second slide">
        <div class="carousel-caption d-none d-md-block offset-1 col-lg-3 carousel-box">
          <h3>TITLEH3</h3>

          <p>Lorem ipsum</p>
          <a href="#" class="btn btn-info">Call to action</a>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</header>

<section id="mu-promo">
  <div class="container">
    <div class="row">
      <div class="col-12">
        lorem ipsum
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

假设您的轮播是div＃carouselExampleIndicators，然后将标题#mu-carousel CSS位置设置为relative，并在标题#mu-carousel中添加另一个div位置绝对值，该div将保存您想要的div。转盘

<header id="mu-carousel" class="">
   <div id="carouselExampleIndicators">carousel</div>
   <div>div (with position absolute) that floats on top of carousel</div>
</header>