html - fancybox缩略图的响应式填充

Question

当我将窗口调整为小 View 时，我想删除 fancybox 缩略图中出现的填充。在桌面 View 中，它们看起来像这样:http://i.imgur.com/wcw0FN1.png

当我调整视口(viewport)大小时，缩略图占据了所有 12 列，但在每一侧添加了大量的填充。这是供引用的图片:http://i.imgur.com/2HePovc.png

我希望缩略图占据所有 12 列，但去掉填充，同时保持缩略图在页面中央，文本位于下方。

这是我为每个带有关联文本的缩略图编写的 HTML 代码:

<div class="col-sm-6  top__767 center__767">
                            <div class="row">
                                <div class="col-sm-12  col-md-6">
                                    <a class="thumbnail fancybox" rel="" href="images/sommerhuse/2.jpg">
                                        <img class="img_wr" alt="" src="images/sommerhuse/2.jpg" />
                                    </a>
                                </div>
                                <div class="col-sm-12  col-md-6">
                                    <h5><strong>Hvide Sande</strong></h5>

                                    <p class="static-height">Minim elit et pariatur aliqua veniam qui fugiat duis ad nostrud occaecat et minim. Do
                                        culpa aliqua do sit mollit ea. Enim laboris laborum qui exercitation irure pariatur
                                        non eiusmod.</p>
                                    <a class="subpage_btn btn_top_offset" href="#">Tryk for at se Mere</a>
                                </div>
                            </div>
                        </div>

Answer 1

我认为问题在于，a-tag 的宽度为 100%，边框为 1 px。 你可以给 a 标签一个 max-width 和 display: inline-block 而不是给父 div 一个 text-align: center;