Как выровнять изображение в нижней части окна просмотра div внутри загрузочной карусели

Question

Я работаю над бутстрапом 2.3.2, и я хочу разместить изображение в нижней части окна просмотра, но не могу этого сделать. Я хочу что изображение второго слоя останется в нижней части окна просмотра в каждом устройстве. Как я могу это достичь.

Вот мой код карусели:

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="bgImage"> 
       <img src="http://placehold.it/1280x600" alt="First slide">    
      </div> 
      <div class="header-text"> 
       <div class="text-center"> 
        <div class="row-fluid"> 
         <div class="span6 offset3"> 
          <div class="firstlayer"> 
           <img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-text.png"> 
          </div> 
         </div> 
        </div> 
        <div class="row-fluid"> 
         <div class="span12"> 
          <div class="secondlayer"> 
           <img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-bottomImage01.png"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

Вот мой CSS:

.carousel-indicators .active { 
    background-color: #2980b9; 
} 
.carousel-inner .item .bgImage img { 
    width: 100%; 
    min-height: 100vh; 
} 

.carousel-control.left, 
.carousel-control.right { 
    opacity: 1; 
    filter: alpha(opacity=100); 
    background-image: none; 
    background-repeat: no-repeat; 
    text-shadow: none; 
} 

.carousel-control.left span { 
    padding: 15px; 
} 

.carousel-control.right span { 
    padding: 15px; 
} 


/* Carousel Header Styles */ 
.header-text { 
    position: absolute; 
    top: 20%; 
    left: 1.8%; 
    right: auto; 
    width: 96.66666666666666%; 
    color: #fff; 
} 

.text-center {text-align:center;} 
.firstlayer {margin-top:180px;} 
.secondlayer {margin-top:175px;} 

Answer 1

Чтобы получить secondlayer DIV, расположенных в нижней части окна просмотра, он должен быть установлен absolutely. См пересмотренный код вашего примера:

.carousel-indicators .active { 
 
    background-color: #2980b9; 
 
} 
 
.carousel-inner .item .bgImage img { 
 
    width: 100%; 
 
    min-height: 100vh; 
 
} 
 

 
.carousel-control.left, 
 
.carousel-control.right { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    background-image: none; 
 
    background-repeat: no-repeat; 
 
    text-shadow: none; 
 
} 
 

 
.carousel-control.left span { 
 
    padding: 15px; 
 
} 
 

 
.carousel-control.right span { 
 
    padding: 15px; 
 
} 
 

 

 
/* Carousel Header Styles */ 
 
.header-text { 
 
    position: absolute; 
 
    top: 20%; 
 
    left: 1.8%; 
 
    right: auto; 
 
    width: 96.66666666666666%; 
 
    color: #fff; 
 
} 
 

 
.text-center {text-align:center;} 
 
.firstlayer {margin-top:180px;} 
 
.secondlayer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.secondlayer img { 
 
    max-width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div id="myCarousel" class="carousel slide"> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <div class="bgImage"> 
 
       <img src="http://placehold.it/1280x600" alt="First slide">    
 
      </div> 
 
      <div class="header-text"> 
 
       <div class="text-center"> 
 
        <div class="row-fluid"> 
 
         <div class="span6 offset3"> 
 
          <div class="firstlayer"> 
 
           <img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-text.png"> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="secondlayer"> 
 
       <img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-bottomImage01.png"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
 
</div>