Bootstrap 的小查询

Question

我正在帮朋友做网站，需要一些建议。我们之前在这里询问过，并被告知更新服务器上所有必要的 jQuery 文件，完成后，但仍然损坏。

网站：3six-d.co.uk

如果你去投资组合，你会看到所有的图片都错了，不是行，而是列。我正在使用它来设置间距：

<div class="col-md-4">
  <a class="fancybox-test" data-fancybox-group="thumb" href="images/portfolio-03.png"><img src="images/portfolio-preview-03.png" alt="" /></a>
</div>

需要说明的是，我已经从 Bootstrap 2 升级到 3。但是我已经按照说明升级了所有语法。（无论如何我希望）但仍然没有运气，他们只是不会像以前那样排队（列和图片之间的差距相等space）。

我自己对此做了一些研究，我能找到的只是它们必须全部放在容器 div 中。

这让我发疯，所以我希望得到一些帮助！

谢谢

Answer 1

<div class="col-md-4">
  <a class="thumbnail" href="images/portfolio-03.png"><img src="images/portfolio-preview-03.png" alt="" /></a>
</div>

bootstrap 的原生 thumbnail class 有什么问题？

Answer 2

您可以将以下 CSS 添加到您的图片中。

.fancybox-test > img {
    width: 100%;
    vertical-align: middle;
}

vertical-align: middle 属性删除图像底部的填充。

Answer 3

这是您期望的吗？如果是，只需将以下规则添加到您的 CSS

.fancybox-test img{
    width:100%;
}

Answer 4

您的列设置为每个列的宽度为 31.6%，结果为 340 像素宽。预览图像为 460x300，因此全部重叠。为它们设置一个或更好的尺寸，但上传正确的尺寸。

Bootstrap 的小查询

Small query with Bootstrap

html

css

twitter-bootstrap-3