fancybox缩略图的响应式填充

Question

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

当我调整视口大小时，缩略图占据了所有 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 和 dislpay: inline-block 而不是给父级 div 一个 text-align: center;

fancybox缩略图的响应式填充

Responsive padding for fancybox thumbnails

html

css

thumbnails

fancybox-2

responsive