Bootstrap img-rounded with .col 类不起作用答案

【问题标题】：Bootstrap img-rounded with .col class not workingBootstrap img-rounded with .col 类不起作用
【发布时间】：2016-09-21 02:55:37
【问题描述】：

我有引导框架页面，其中有两个图像。

第一张图片：此图片有两个类别：col-sm-12 和 img-rounded。

第二张图片：这张图片只有一个类：img-rounded。

问题是，对于第一张图片，图片没有边框半径。但是如果我从 tag 中删除 col-sm-12 ，那么这个边界半径是清晰可见的。这两种情况有什么问题？

为什么对于第一种情况，边框半径不显示？

Fiddle here

<div class="row" style="background-color:red;">
  <img class="col-sm-4 img-rounded" 
  src="http://images.indianexpress.com/2014/11/doordarshan422.jpg" >
</div>
<br>
<div class="row" style="background-color:red;">
  <img class="img-rounded" 
  src="http://images.indianexpress.com/2014/11/doordarshan422.jpg" >
</div>

【问题讨论】：

我想你现在已经解决了你的问题？
明白我的意思吗？

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

如果您将img-rounded 类与col-sm-4 一起应用，则img 标签占据了col-sm-4 类的15px 的左右填充，而img-rounded 类具有border-radius 6px只有，所以它不适用于您的第一种情况。

如果您想在第一种情况下申请，请增加border-radius并将其设置为greater then 15px。

也许你得到了答案。

【讨论】：

【解决方案2】：

您需要将col-sm-4 类应用于包含图像的div，而不是图像本身：

<div class="container">
  <div class="row" style="background-color:red;">
    <div class="col-sm-4">
      <img class="img-rounded" 
           src="http://images.indianexpress.com/2014/11/doordarshan422.jpg">
    </div>
  </div>
</div>

【讨论】：

我知道，但我的问题是为什么我不能同时使用 col-sm-4 类？