我的目标是每行显示4个图像。代码如下：
- <div class="row">
- <div class="col-md-3 col-sm-4 col-xs-6">
- <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
- </div>
- <div class="col-md-3 col-sm-4 col-xs-6">
- <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
- </div>
- <div class="col-md-3 col-sm-4 col-xs-6">
- <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
- </div>
- <div class="col-md-3 col-sm-4 col-xs-6">
- <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
- </div>
- </div>
而且我也希望看到基于Bootstrap的列样式调整大小的图像，但是我正在获得的是完整的图像重叠example。
任何线索发生了什么？
解决方法
尝试将其添加到您的样式表中：
- img {
- width: 100%;
- }
更新：作为另一种选择(如本回答的@JasonAller的评论中所指出的)，您可以为每个img元素添加class =“img-responsive”。这适用于max-width：100％;高度：自动;到图像，以便它可以很好地缩放到父元素。有关更多信息，请参阅Bootstrap docs。
