自舉輪播自定義

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

已經有一類“ col-lg-6”。 這樣應該可以正常工作。 您的問題在這里-

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

位置：絕對屬性，將覆蓋BS的默認CSS樣式。 因此，刪除此。 另一種選擇是自定義媒體查詢。

Answer 2

我不太確定，但是如果您取出

最小寬度：100％； 高度：300像素；

從您的.carousel-inner> .item> img嗎？

因為您已經准備好在引導腳本中為圖片設置大小，所以在CSS中添加新的大小會覆蓋引導程序中的樣式...因此，請嘗試一下

Answer 3

將class="img img-responsive"到所有圖像。 類名是mispelt，這就是CSS無法正常工作的原因。

對於列，您可以根據目標設備添加md ， sm和xs類。 輪播不需要自定義CSS 。 這應該解決您的問題。