引导轮播自定义

Question

您好，我在我的网站上有一个自定义的引导轮播，但是当我将屏幕调整为更小（响应式测试）时效果不佳，它与图像重叠

全屏尺寸

调整屏幕大小

这是我的引导代码

<div class="col-lg-12">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner">

                                <div class="item active col-lg-12">
                                 <div class="col-lg-6"><img src="//placehold.it/450x300" alt="folder" class="img-resposnive"></div>
                                  <div class="col-lg-6 carousel-caption">
                                    <p>
                                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                                    </p>
                                    <button type="submit" class="btn btn-green"><i class="fa fa-sign-in"></i> Request Access to Private Beta</button>
                                  </div>
                                </div>
                                <div class="item">
                                  <div class="col-lg-6"><img src="//placehold.it/450x300" alt="folder" class="img-resposnive"></div>
                                  <div class="col-lg-6 carousel-caption">
                                    <p>
                                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                                    </p>
                                    <button type="submit" class="btn btn-green"><i class="fa fa-sign-in"></i> Request Access to Private Beta</button>                                 
                                  </div>
                                </div>
                                <div class="item">
                                  <div class="col-lg-6"><img src="//placehold.it/450x300" alt="folder" class="img-resposnive"></div>
                                  <div class="col-lg-6 carousel-caption">
                                    <p>
                                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                                    </p>
                                    <button type="submit" class="btn btn-green"><i class="fa fa-sign-in"></i> Request Access to Private Beta</button>                                 
                                  </div>
                                </div>

                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                      </a>
                    </div>
                </div>

这是我的 CSS

.carousel {
 margin-bottom: 60px;
 }
 /* Since positioning the image, we need to help out the caption */
.carousel-caption {
 z-index: 10;
 }

 /* Declare heights because of positioning of img element */
 .carousel-inner > .item > img {
 position: absolute;
 top: 0;
 left: 0;
 min-width: 100%;
 height: 300px;
 }

.carousel-control.left {
  background-image: none;
  background-repeat: repeat-x;
  }

.carousel-control.right {
  background-image: none;
  background-repeat: repeat-x;
  }

.carousel .item {
  background-color: #4A2485;
  height: 300px;
 }

.carousel-control {
width:auto;
 }

.carousel-caption {
  left: 45%;
  padding-bottom: 30px;
  right: 20%;
  text-align:left;
  color:#bababa;
  text-shadow:none;
  }

Answer 1

我不太确定，但如果你把它拿出来会发生什么

最小宽度：100%； 高度：300px；

从你的 .carousel-inner > .item > img ?

因为您已经在引导脚本中为图片指定了尺寸，所以向您的 css 添加新尺寸将覆盖引导程序中的样式...所以试一试

Answer 2

已经有一个类“col-lg-6”。所以这应该可以正常工作。你的问题就在这里-

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 300px;
}

这个 position: absolute 属性覆盖了 BS 的默认 CSS 样式。所以删除这个。另一种选择可能是自定义媒体查询。

Answer 3

将class="img img-responsive" 添加到所有图像。类名拼写错误，这就是 CSS 无法正常工作的原因。

关于列，您可以根据目标设备添加md、sm 和xs 类。轮播不需要自定义 CSS。这应该可以解决您的问题。