bootstrap 实现轮播图居中，两边有盒子

要实现轮播图居中，两边有盒子的效果，可以通过以下步骤来实现：

1. 在轮播图的容器外层包裹一个父容器，设置这个父容器的宽度为100%。

2. 在父容器中添加两个盒子，用于承载左右两侧的内容。设置这两个盒子的宽度为父容器宽度的一半，同时设置它们的位置为左右两侧。

3. 在轮播图容器中添加以下样式：

margin: 0 auto; /* 设置水平居中 */
width: 100%; /* 设置宽度为100% */

这样可以让轮播图容器在父容器中水平居中，并且宽度和父容器一样大。

4. 最后，调整轮播图的样式，使其与左右两侧的盒子之间有一定的间距。可以通过以下样式来实现：

.carousel-control.left {
  margin-left: -50px;
}

.carousel-control.right {
  margin-right: -50px;
}

这样就可以实现轮播图居中，两边有盒子的效果了。完整的代码示例如下：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 left-box">
      <!-- 左侧内容 -->
    </div>
    <div class="col-xs-6 right-box">
      <!-- 右侧内容 -->
    </div>
  </div>
  <div class="row">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

<style>
  .left-box,
  .right-box {
    width: 50%;
    height: 200px;
    position: absolute;
    top: 0;
    z-index: 1;
  }
  .left-box {
    left: 0;
  }
  .right-box {
    right: 0;
  }
  #myCarousel {
    margin: 0 auto;
    width: 100%;
  }
  .carousel-control.left {
    margin-left: -50px;
  }
  .carousel-control.right {
    margin-right: -50px;
  }
</style>