img響應式引導程序3上的響應式按鈕

Question

我正在嘗試在bootstrap3中的img響應上制作文本。 它無法正常工作，因為當我執行“絕對” css時，它將無法響應。 如何使按鈕始終出現在圖像上並做出響應？

一些HTML

        <div class="container">
            <div class="row">
                <div class=" col-md-12 col-sm-12 col-xs-12">
                    <div class=" col-md-6  col-sm-12 col-xs-12 ">
                        <img class="left img-responsive" src="http://placehold.it/350x250" alt="">
                        <div class="btn btn-danger button-image">
                            DOWNLOAD
                        </div>
                    </div>
                    <div class=" col-md-6  col-sm-12 col-xs-12 ">

                        <img class="left img-responsive" src="http://placehold.it/350x250" alt="">
                        <div class="btn btn-danger button-image">
                            SEE MORE
                        </div>

                    </div>

                </div>
          </div></div>


        <div id="push"></div>

Bootply http://www.bootply.com/131025

Answer 1

從右向左更改：

.button-image{
position:absolute;
bottom:21px;
left: 130px;
width:100px;
height:30px;
}

您可能要考慮使用百分比將其放置在div中，盡管要考慮到不同的視口尺寸等。