我使用Bootstrap和jQuery作为Web管理员后端的核心基础。 我添加了一个在BS Modal中打开的“ Media Uploader”,它工作正常,但是随着图像的上传(使用dropzone.js一张一张),它们被添加到了主要的预览区域中,而之前是现有的图片。

发生这种情况时,如果图像的高度不同,我将得到以下结果:

图像缩略图未对齐

我知道是什么原因,我只想知道是否有解决此问题的简单方法。 以下是制作每个缩略图框的标记:

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 media-col">
    <div class="box media-box">
        <div class="box-body table-responsive">
            <img src="SOME IMAGE">
            <input type="text" class="form-control" readonly="true" value="SOME IMAGE URL">
        </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>

所有图像都在单个<div class="row"></div>

我的主要问题是图像缩略图的响应能力。 我无法为每个X#图像创建一个包装器,因为每行显示的图像量会根据屏幕分辨率而变化。

#1楼 票数:0

问题是浮点数如何在CSS中起作用的怪异效果。 如果您理解它,这是有道理的,但如果您不理解,则可能看起来很奇怪。

我建议将主要块设置为display:inline-block而不是float:left 然后,它们将自动“行”自己,而不管屏幕的宽度如何,如下所示:

http://codepen.io/EightArmsHQ/pen/zxXOWX

另一种选择是使用砌体之类的东西,它将以一种很好的方式absolute地(牢固地)定位所有元素。

http://masonry.desandro.com/

  ask by matcartmill translate from so

未解决问题?本站智能推荐:

1回复

结合使用引导网格和缩略图网格以及扩展预览

我正在创建一个网站,并将这个基于引导程序的主题用作起点。 正如Codrops教程中所述,我还结合了非常漂亮的Thumbnail Grid和Expanding Preview 。 我正在尝试做的是保持在主题中看到的投资组合网格,在该主题中所有预览图像都是响应式引导col-lg-4 col-s
2回复

保持灯箱缩略图始终在div中均匀分布

我正在寻找一种方法来使我正在使用的灯箱缩略图在div中保持均匀间隔,并且当其中一个由于窗口大小调整而下降时也要均匀间隔。
1回复

使引导程序均匀分布并正确对齐div

我想知道发生了什么事,当我的div为X大小时,可以轻松地在一个屏幕上看到它而无需使用滚轮,它将页脚放置在屏幕下方,但是当div放置时它可以工作或尺寸更大 样例代码: CSS: 我对它的工作原理做了一个JSFiddle 。 非常感谢
1回复

Bootstrap3.1.1缩略图滑块

我使用此代码,但它在我的网站上制作了一个垂直图像滚动器。 我如何改变它使其水平? 我从http://www.bootply.com获取了此代码。
4回复

具有不同图像大小的缩略图Bootstrap

我想要有不同大小和不同文本数量的图像缩略图。 但我希望它们都具有相同的尺寸。 就像Bootstrap网站上的这个例子一样。 下面是我目前的代码, 在jsFiddle上有一个演示 。 我有不同的图像大小,所以这会被打破。 Bootstrap有可能吗?
1回复

轮播缩略图仍然不会自动更新

使用缩略图构建旋转木马时,缩略图应与显示的幻灯片相对应,并且所选缩略图应在其周围有边框,以便用户知道他们所在的幻灯片。 我当前的代码只是选择了缩略图,他们应该用旋转木马的每张幻灯片自动更新,我做错了什么? 小提琴http://jsfiddle.net/gward90/xr8qzxmg/9/
1回复

选择缩略图时打开图库

我正在尝试添加一些代码,以便在选择缩略图时打开图库。 现在我有这条线 现在,无论何时选择缩略图,我都想打开一个画廊或旋转木马。 这是一个档案袋,因此每个缩略图代表不同的内容,例如摄影,视频,插图等。 Bootstrap的CSS通常是默认的,与js相同。 谢谢
1回复

引导程序缩略图问题

我希望标题位于缩略图内,并且该图像不会在标题上溢出: 我的html: CSS: 我尝试将标题放在关闭缩略图的div标签上方,但随后图像在标题上溢出。