Bootstrap: 如何清除图库中的图片？

Question

首先 link 通过 github http://torgian.github.io/website-dev/gallery.html

到站点

对于任何拼写错误，我们深表歉意，今天已经为此工作了几个小时。

这是直接到画廊。

更新#2 进一步更新代码。非常感谢 msfoster 让我走上了正确的道路。令人惊讶的是修复如此简单......我只是不知道它是什么！啊哈哈哈 xD

喝下清酒我现在想运行上山...但是日本现在是晚上10点，所以我等到明天.

代码块即将修复。

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 image-wrapper"> <a href="img/nasarow-fo-to1.jpg" class="img-thumbnail">
         <img src="img/nasarow-fo-to1.jpg" class="img-responsive img-height">
      </a></div>

以上是 7 个图像 div 的列表，分为两行。那是我的第一个问题。所以我删除了第二行，但仍然有图像不在同一行中的问题。

所以我接下来输入这个 CSS:

.image-wrapper {
height: 300px;
width: auto;}

经过一些实验才使高度和宽度正确，但发现如果我将宽度设置为 AUTO 并将高度保持在固定比率，图像仍会响应视口大小并保持相同的统一行。

天哪，太难了。

我不确定这是否是永久修复，但我会在将来添加更多画廊时重新访问它。

我正在使用 bootstrap 创建带有网格系统的画廊。不幸的是，过去几天我一直在努力让事情正确排列。我似乎无法让 clearfix 正常工作，我不知道我是否将代码放入了 html 中的错误位置。

也尝试了第 nth-child 代码，但我也坚持这样做。

我会在等待答案的同时继续研究，但肯定需要一些帮助。

建议？

在 CSS 中，我将高度限制为 300px。你可以看到有些图片比其他图片高，我认为这是造成中断的原因，但只是想不出如何防止图片掉到下一行而不是我需要的 2 或 3 张图片在每一行中。

背景：现在是 HTML 和 CSS 的学生。在学习 Treehouse 课程时更新我的网站。

Answer 1

它崩溃的原因是您为每三个图像创建一个新的 row。

# # #

将打破

# #
#

然后下一张图片又在新的一行中：

# #
#
#

将所有图片放在一行中，它们将根据您为每张图片设置的 col-x-y 断开。

Bootstrap: 如何清除图库中的图片？

Bootstrap: how to clear images in a gallery?

html

css

web

twitter-bootstrap