html - Bootstrap 3 : centered responsive image with styling

Question

我正在尝试将样式化的响应式图像居中，但它似乎不起作用。一个接一个地删除类后，我发现我的类“portimage”似乎破坏了响应能力。

我不希望图片大于 700 像素，我希望它们周围有浅色边框。

代码如下:

<div class="row mtmini">
        <div class="col-lg-12">
            <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch1-Home.jpg">
            <br>
            <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch2-Menu.jpg">
            <br>
            <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch3-CC.jpg">
        </div>
</div>

这是“portimage”类的 CSS:

.portimage {
max-width: 700px;
border:1px solid lightgray;
}

抱歉，如果这是一个愚蠢的问题——刚刚开始。我试着搜索这个，但我没有找到解决图像样式超出居中和响应能力的解决方案。提前致谢!

Answer 1

它应该工作正常，请仔细检查您是否正确插入了 Bootstrap 的 CSS 链接。此外，如果您使用的是 gulp/grunt 等构建工具，请尝试重新启动 watch 任务。

此外，“mtmini”类是否向“行”div 添加了任何样式？