Question

我想要一个带有更改文本的红色框（如旋转木马）以及静态图像。此外，我希望旋转木马隐藏在sm和xs设备上。

但旋转木马没有填满整个div，只是看起来像一个小横幅。此外，旋转木马和img之间有一个很大的空间。我做错了什么？以下是使用的代码：

<div class="container">

  <div id="myCarousel" class="col-md-4  carousel slide col-lg-4  hidden-sm hidden-xs text-center" data-ride="carousel"
         style="background-color: #C33233">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner carousel-overlay text-center">
      <div class="item active">
        DISCOVER THE MIRACLE OF DATA .....                
      </div>
      <div class="item">
        text 222222                
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <div class="col-md-8 col-lg-8 col-sm-12 col-xm-12">
    <img src="./img/homepage_pics/ddi.png" alt="Data">
  </div>

</div>

Answer 1

要修复轮播的高度，您可以给它一个课程，并根据您的需要使用此CSS。

.carousel .item {
  height: <size in px, em, etc.>;
  background-color: #C33233;
}

您有</div>过早关闭carousel-inner。

您还可以删除col-lg-4，因为大小调整选项md是一个响应级别，它将在所有屏幕尺寸上生效。

如何在包含更改文本的框旁边放置一个静态img（轮播）

1 个答案: