Question

嗨，所以我正在一个带有图片库的网站上工作，我决定使用一个Codeigniter和一个名为Image CRUD的库来获取一些后端内容，并使用Twitter Bootstrap作为前端。它非常基本的东西。问题是Image CRUD为前端生成了很多自己的代码，所以我很难让它看起来像我想要的那样。我试图建立一个响应式画廊，调整大小并保持集中在一堆不同的设备上。这应该是一块带有引导程序的小菜一碟，但由于某种原因它不会起作用。任何帮助将不胜感激！

下面是Image CRUD输出图像的代码：

<ul class='photos-crud'>
            <li id="photos_206">
            <div class='photo-box'>
                <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb__b551b-6.jpg' width='290' height='260' class="img-responsive basic-image" /></a>
                                                                            <div class="clear"></div>
            </div>
        </li>
            <li id="photos_203">
            <div class='photo-box'>
                <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" /></a>
                                                                            <div class="clear"></div>
            </div>
        </li>
            <li id="photos_204">
            <div class='photo-box'>
                <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" /></a>
                                                                            <div class="clear"></div>
            </div>
        </li>
            <li id="photos_205">
            <div class='photo-box'>
                <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" /></a>
                                                                            <div class="clear"></div>
            </div>
        </li>
            <li id="photos_202">
            <div class='photo-box'>
                <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" /></a>
                                                                            <div class="clear"></div>
            </div>
        </li>
            <li id="photos_201">
            <div class='photo-box'>
                <a href='link_to.jpg' title="" target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" /></a>
                                                                            <div class="clear"></div>
            </div>
        </li>
        </ul>

Answer 1

问题可能在于您的图片宽度/高度具有精确尺寸。如果你可以摆脱它并让bootstrap接管，那就太好了。响应式图像通常是父宽度的100％，而父级具有其他东西的百分比。也许你可以使用SASS将@extend bootstrap样式用于生成的元素中，以便...

.photos-crud { @extend .row }
.photos-crud > li { @extend .col-md-3}

这样的东西会设置网格来布局图像，然后如果你可以删除自动生成的尺寸，那么很好，但如果不是，也许可以使用！important来覆盖像...这样的尺寸。

.photos-crud > li img {width:100% !important; height:auto !important;}

中心图像CRUD画廊与Bootstrap

1 个答案: