Question

我有bootstrap框架页面，它有两个图像。

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

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

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

为什么第一种情况，border-radius没有显示？

<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>

Answer 1

您需要将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>

Answer 2

如果您将img-rounded类应用于col-sm-4，那么img标记将占用类col-sm-4的15px左右的填充，并且img-rounded类具有仅border-radius 6px，所以它不适用于您的第一个案例。

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

你可能得到了答案。

引导程序img-round与.col类无法正常工作

2 个答案: