Css 中央图像积垢画廊与引导

大家好，我正在一个有图像库的网站上工作，我决定使用Codeigniter和一个名为image CRUD的库来处理一些后端内容，并使用Twitter引导来处理前端内容。这是非常基本的东西。问题是Image CRUD为前端生成了很多自己的代码，所以我很难让它看起来像我想要的那样。我正在尝试制作一个响应性强的多媒体资料，它可以调整大小并集中在一堆不同的设备上。这对于引导来说应该是小菜一碟，但由于某些原因，它就是不起作用。任何帮助都将不胜感激

以下是图像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>

问题可能在于您的图像宽度/高度具有精确的尺寸。如果你能摆脱它，让引导程序接管，那就太好了。响应图像通常是父图像宽度的100%，并且父图像具有其他部分的百分比。也许您可以使用SASS将引导样式@扩展到生成的元素中，以便

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

类似的东西将设置网格来布局图像，然后如果你可以删除自动生成的尺寸，很好，但如果没有，也许可以使用！重要的是覆盖尺寸，如

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