顯示bootstrap旋轉木馬標題的圖像包裝

Question

我需要顯示caption圖像外包裝（圖像的底部）在bootstrap carousel喜歡這張圖片。在.carousel-captionclass我設置了position relative和top : 300px但我的caption不能在圖像wrapper上工作。如何解決他的問題？

CSS代碼：

/* CUSTOMIZE THE CAROUSEL 
    -------------------------------------------------- */ 

    .carousel { 
     margin-bottom: 60px; 
    } 

    .carousel .container { 
     position: relative; 
     z-index: 9; 
    } 

    .carousel-control { 
     height: 80px; 
     margin-top: 0; 
     font-size: 120px; 
     text-shadow: 0 1px 1px rgba(0,0,0,.4); 
     background-color: transparent; 
     border: 0; 
     z-index: 10; 
    } 

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

    .carousel-caption { 
     background-color: transparent; 
     position: relative; 
     max-width: 550px; 
     padding: 0 20px; 
     margin:0 auto; 
     top: 300px; 
     text-align:center; 
    } 
    .carousel-caption h1, 
    .carousel-caption .lead { 
     margin: 0; 
     line-height: 1.25; 
     color: #fff; 
     text-shadow: 0 1px 1px rgba(0,0,0,.4); 
    } 
    .carousel-caption .btn { 
     margin-top: 10px; 
    } 



    /* RESPONSIVE CSS 
    -------------------------------------------------- */ 

    @media (max-width: 979px) { 

     .carousel .item { 
     height: 500px; 
     } 
     .carousel img { 
     width: auto; 
     height: 500px; 
     } 

    } 


    @media (max-width: 767px) { 


     .carousel { 
     margin-left: -20px; 
     margin-right: -20px; 
     } 
     .carousel .container { 

     } 
     .carousel .item { 
     height: 300px; 
     } 
     .carousel img { 
     height: 300px; 
     } 
     .carousel-caption { 
     width: 65%; 
     padding: 0 70px; 
     margin-top: 100px; 
     } 
     .carousel-caption h1 { 
     font-size: 30px; 
     } 
     .carousel-caption .lead, 
     .carousel-caption .btn { 
     font-size: 18px; 
     } 
    } 

HTML：

<!-- Carousel 
    ================================================== --> 
    <div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="http://getbootstrap.com/assets/img/examples/slide-02.jpg" alt=""> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>Example headline.</h1> 
       <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       <a class="btn btn-large btn-primary" href="#">Sign up today</a> 
      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="http://lorempixel.com/1280/1024/technics" alt=""> 
      <div class="container"> 
      <div class="carousel-caption text-centered"> 
       <h1>Another example headline.</h1> 
       <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       <a class="btn btn-large btn-primary" href="#">Learn more</a> 
      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="http://lorempixel.com/1280/1024/abstract" alt=""> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>One more for good measure.</h1> 
       <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
       <a class="btn btn-large btn-primary" href="#">Browse gallery</a> 
      </div> 
      </div> 
     </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
    </div><!-- /.carousel --> 

直播Previe here

Answer 1

您的容器div需要包含的圖像和字幕。 它只包含這個例子中的標題。

Answer 2

HTML：

<section> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
        <ol class="carousel-indicators hidden"> 
         <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"> 
          <div class="container"> 
           <img src="images/slide1.jpg" height="400"alt="" /> 
           <div class="carousel-caption" style="color:red; width:100%;"> 
            <div class="row"> 
             <div class="col-md-6 col-sm-6"> 
             </div> 
             <div class="col-md-6 col-sm-6"> 
              <div> 
               <h2>Haby Scholarship</h2> 
               <h3>By Haby Digital</h3> 
               <h2>Commerce</h2> 
               <p>Description...</p> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="item"> 
          <div class="container"> 
           <img src="images/slide2.jpg" height="400"alt="" /> 
           <div class="carousel-caption" style="color:#68217A;"> 
            <div class="row"> 
             <div class="col-md-7"> 
             </div> 
             <div class="col-md-5"> 
              <div style="width:100%;"> 
               <h2>Phael Scholarship</h2> 
               <h3>By Phael Digital</h3> 
               <h2>Information Technology</h2> 
               <p>Description...</p> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="item"> 
          <div class="container"> 
           <img src="images/slide1.jpg" height="400"alt="" /> 
           <div class="carousel-caption" style="color:#DF6026;"> 
            <div class="row"> 
             <div class="col-md-7"> 
             </div> 
             <div class="col-md-5"> 
              <div style="width:100%;"> 
               <h2>Haby-Phael Scholarship</h2> 
               <h3>By Haby-Phael Digital</h3> 
               <h2>Science</h2> 
               <p>Description...</p> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        <a data-slide="prev" href="#myCarousel" class="carousel-control left slider-arrow-margin-left"><span style="color:#808080;"><i class="fa fa-chevron-circle-left fa-3x" aria-hidden="true"></i></span></a> 
        <a data-slide="next" href="#myCarousel" class="carousel-control right slider-arrow-margin-right"><span style="color:#808080;"><i class="fa fa-chevron-circle-right fa-3x" aria-hidden="true"></i></span></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

CSS：

.carousel-control { 
    background:none; 
} 



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

.carousel-control.right{ 
    right: 0; 
    left: auto; 
    background-image: none; 
    background-repeat: repeat-x; 
    filter: unset; 
} 

@media (max-width: 767px) { 

    .image-wrapper-bg { 
     width: 80%; 
     margin: 0 auto; 
     border: 2px solid #9AA5A7; 
    } 
} 

@media (min-width: 992px) { 

    .carousel-control .icon-prev, .carousel-control .icon-next, 
    .carousel-control, .carousel-control { 
     display: inline-block; 
     position: absolute; 
     top: 50%; 
     z-index: 5; 
    } 

    .slider-arrow-margin-left{ 
     margin-left:-100px; 
    } 
    .slider-arrow-margin-right{ 
     margin-right:-100px; 
    } 

    .image-wrapper-bg{ 
     width: 94%; 
     margin:0 auto; 
     border:2px solid #9AA5A7; 
     margin-right:0; 
    } 
    .caption { 
     height: auto; 
     width: 100%; 
     margin: 0; 
    } 
} 

@media (min-width:768px) and (max-width: 991px) { 

    .image-wrapper-bg{ 
     width: 84%; 
     margin:0 auto; 
     border:2px solid #9AA5A7; 
    } 

    .slider-arrow-margin-left{ 
     margin-left:-30px; 
    } 

    .slider-arrow-margin-right{ 
     margin-right:-30px; 
    } 
    .padding-slider-caption{ 
     padding:20px 20px 20px 40px; 
    } 
    .caption{ 
     padding-left:50px; 
    } 
} 

.padding-slider-caption{ 
    padding:20px; 
} 

@media (max-width: 767px) { 

    .image-wrapper-bg{ 
     width: 70%; 
     margin:0 auto; 
     border:2px solid #9AA5A7; 
    } 

    .padding-slider-caption{ 
     padding:20px 20px 20px 40px; 
    } 

    .caption{ 
     padding-left:50px; 
    } 
} 

.padding-slider-caption{ 
    padding:20px; 
} 

@media (min-width:992px) { 

    .carousel-caption{ 
     position:realative; 
     /*background-color: hsla(360, 100%, 100%, 0.5);*/ 
     color:#68A667; 
     margin-top:-10px; 
     text-align: left; 
     line-height: 1.5; 
     padding:15px; 
     z-index: 10; 
     bottom:200px; 
    } 
} 

@media (min-width:600px) and (max-width:991px) { 

    .carousel-caption{ 
     position:realative; 
     /*background-color: hsla(360, 100%, 100%, 0.5);*/ 
     color:#68A667; 
     margin-top:-10px; 
     text-align: left; 
     line-height: 1.5; 
     padding:15px; 
     z-index: 10; 
     bottom:0; 
    } 
} 

重寫引導使您可以將任何你想要的標題。 #bootstrap #CSS #Responsive