如何在React Bootstrap中正确使用Thumbnail组件？

Question

这是我的加价：

<Thumbnail src="/path/to/image"  />

这是生成的html：

<div src="/path/to/image" class="thumbnail" ><img src="/path/to/image" ></div>

这是CSS（来自bootstrap-sass）：

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border 0.2s ease-in-out;
    -o-transition: border 0.2s ease-in-out;
    transition: border 0.2s ease-in-out;
}

.thumbnail > img, .thumbnail a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

这就是结果：

问题是边界在div上。因为图像比div小，所以看起来很奇怪。我更喜欢边界在图像上。上面的第二个选择器，缩略图＆gt; img，使用max-width，这对于防止高分辨率图像从容器中弹出是必不可少的。所以 - 给定这些CSS规则以防止图像弹出它看起来Thumbnail已经正确地将.thumbnail类放在包含div上。但是边界是在包含div，而不是在img标签上。

如果我只是将Bootstrap img-thumbnail类直接放在图像上（并完全忘记React-Bootstrap Thumbnail），我得到了我想要的结果。

.img-thumbnail具有最大宽度和边框。

看起来.thumbnail来自bootstrap-sass。所以，总的来说，我不确定这是否是react-bootstrap或bootstrap-sass的问题。无论如何，React-Bootstrap Thumbnail组件不能像我期望的那样工作。这是错误还是用户错误？