当前位置: 动力学知识库 > 问答 > 编程问答 >

html - BootStrap images sometimes overlapping

问题描述:

I'm having a problem with CSS Bootstrap on images that overlap on each others. The problem is also that sometimes it happens, sometimes it doesn't so it's very inconsistent.

I also noticed that if I click on F12 Dev tools, the images automatically get spaced properly.

I tried refreshing the cache pressing CTRL+F5 but the problem remains.

This is the website http://www.sdhealthy.com/productssnacks.html

and this is a sample of images overlapping (picture).

Anybody can please point me to what's wrong on the CSS code??

网友答案:

I've had a look through your code and you are using the isotope jquery plugin to position and animate the divs with 'isotope-item class'.

I suspect that you need to add this part of your jquery...

$(".isotope-w").isotope({
itemSelector: '.item',
layoutMode: 'fitRows'
});

to a $(document).ready function.

This is because the isotope plugin is calculating heights of the divs before the images have finished downloading.

A "workaround" would be to manually add the height attribute to each of the images but I woould try and correct your jquery.

Firebug is also reporting an error:

ReferenceError: $ is not defined: $(document).ready(function () {
http://www.sdhealthy.com/productssnacks.html
Line 29

If your isotope code is already supposed to run on document ready, this error will prevent it from running.

分享给朋友:
您可能感兴趣的文章:
随机阅读: