Question

我创建了一个img-circle，使用两个row与一段文字放在同一.col-xs-6,上，但我的图像溢出{{1}的边缘}。

我尝试将container更改为0，但这不起作用。

我目前没有padding的任何CSS样式。

img-circle

Answer 1

您需要在.img-responsive中使用课程img，请参阅Bootstrap Docs

Bootstrap 3中的图像可以通过添加响应友好 .img-responsive类的。{这适用于max-width: 100%;， height: auto;和display: block;到图片，以便它可以很好地缩放到父元素。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container about">
  <div class="row">
    <div class="col-xs-6">
      <p class="hello">Hello,</p>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <p class="intro">text from paragraph here</p>
    </div>
    <div class="col-xs-6">
      <img class="profile-pic img-circle img-responsive" src="//lorempixel.com/1000/1000" />
    </div>
  </div>
</div>

img-circle走出边缘

1 个答案: