0

I'm creating my portfolio site on Bootstrap 4. I've implemented a sliding javascript caption (tweaked from a source online) to overlay the thumbnail images. That all works fine (except for the caption box extending too far out..), but when I started using that, the left edge of where my thumbnails start has moved to the right and I can't figure out what's causing the problem. I've been trying to figure it out for hours.. whatever's causing it is not caused by my custom CSS, because I tried removing it all and it was still weirdly aligned there.

Another thing that I'm trying to do is have the thumbnails tiled up right up against each other, but I can't figure out how to get rid of their margins/padding...

Here's a link to make it easier to check it out. Thanks so much in advance, it would really mean a lot to me if I could get this to work.

SO sorry for the messy code, I'm going to clean it up once I get this stuff working.

EDIT: I don't know why, or how.. but the alignment problem was caused by the UL class. I changed it to a div and now it works perfectly.

4

1 に答える 1

1

コードを見てください。幅を 2 ​​回定義しました。使用するwidth:97%;

#hover-img .caption-btm {
background: rgba(4, 186, 183, 0.6);
width: 70%;   ********
height: 60px;
position: absolute;
bottom: 4px;
color: #fff;
display: none;
width: 100%;    ********
}
于 2013-10-04T17:39:10.020 に答える