Простая позиция кнопки прокрутки не слушает меня

Question

Привет, я создаю html-шаблон с бутстрапом, у меня проблемы с этой кнопкой. Мне нужно положить его внизу. Я думаю, что делаю правильный путь, но это не работает.

Как это исправить? И как сделать его исправленным в том же положении, когда я меняю разрешение экрана (отзывчивый) :)

Я знаю, что моя фотография не занимает целую высоту или что-то в этом роде. Требуется только высота col-xs-12, и когда я хочу создать контент после того, как он отобразит ту же кнопку, что и в середине изображения.

HTML:

<div class="container intro slider"> 
     <img class="img-responsive" src="images/as_royal-3final.jpg" alt="sliderimage"> 
     <div class="col-xs-12 slider"> 
     <h1 class="row sliderh1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, tempore</h1> 
     <p class="row sliderp">Lorem ipsum dolor sit amet.</p> 
     <a href="#about"><span class="glyphicon glyphicon-menu-down"></span></a> 
     </div> 

    </div><!-- /.intro --> 

CSS:

.intro { 
    background-size: cover; 
} 

.img-responsive { 
    position: absolute; 
    z-index: -1; 
} 

.row.sliderh1 { 
    text-align: center; 
    margin-top: 20%; 
    color: #FFF; 
} 

.row.sliderp { 
    text-align: center; 
    font-size: 24px; 
    color: #fff; 
} 

.glyphicon.glyphicon-menu-down { 
    width: 30px; 
    height: 30px; 
    display: block; 
    position: absolute; 
    left:50%; 
    margin: auto; 
    color:#eee; 
    bottom: 10px; 

} 

.glyphicon.glyphicon-menu-down:active, 
.glyphicon.glyphicon-menu-down:hover, 
.glyphicon.glyphicon-menu-down:focus { 
    text-decoration: none; 
    color: #eee; 
} 

скрипку: https://jsfiddle.net/DTcHh/

Answer 1

Вы должны поместить кнопку в нижней части экрана, то есть поместить вашу кнопку за пределы d внутривенно

Обновлено Css

.glyphicon.glyphicon-menu-down { 
    position: absolute; 
    left:50%; 
    margin: auto; 
    color:red; 
    top: auto;//add this extra 
    bottom: 10px;  
} 

Обновлено HTML

<div class="container intro slider"> 
    <div class="black"> 
    </div> 
    <div class="col-xs-12 slider"> 
    <h1 class="row sliderh1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, tempore</h1> 
    <p class="row sliderp">Lorem ipsum dolor sit amet.</p>   
    </div> 

</div><!-- /.intro --> 
<a href="#about"><span class="glyphicon glyphicon-menu-down">button</span></a> 

Поместите метку снаружи от дел.