html - Bootstrap 3 - 网格未正确对齐

Question

我正在 Bootstrap 4 上创建我的投资组合网站。我实现了一个滑动 javascript 标题(从在线源调整)来覆盖缩略图。这一切都很好(除了标题框延伸得太远......)，但是当我开始使用它时，我的缩略图开始位置的左边缘已经移动到右边，我无法弄清楚是什么导致了问题。几个小时以来，我一直在努力弄清楚它。无论是什么原因造成的，都不是由我的自定义 CSS 引起的，因为我尝试将其全部删除，但它仍然在那里奇怪地对齐。

我想做的另一件事是让缩略图相互平铺，但我不知道如何去掉它们的边距/填充...

Here's a link以便于检查。在此先感谢您，如果我能让它发挥作用，那对我来说真的意义重大。

对于困惑的代码，我深表歉意，一旦我让这些东西工作，我就会清理它。

编辑:我不知道为什么，或者如何......但对齐问题是由 UL 类引起的。我将其更改为 div，现在它可以完美运行了。

Answer 1

看看你的代码。您已经定义了两次宽度。使用 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%;    ********
}