使用 Bootstrap 显示小的响应式图像

Question

我正在开发一个小型社交网络王者，我正在努力显示用户的个人资料图片以及他/她的帖子。

这就是我现在拥有的：

问题在于左侧的个人资料图片。首先，“圣诞节糟透了...”文本已被图像向下推（我怀疑这需要修复 clearfix 类 - 问题是我无法让它工作）。其次，如果屏幕尺寸发生变化，图像溢出（我认为是术语）列宽：

您可以在上面（iPhone 6 Plus）看到“@grinch...”行已被按下。

这是我的代码：

<div ng-repeat="post in posts | orderBy:'+':true">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading line-break" ng-if="post.title">
          <strong>{{post.title}}</strong>
        </div>
        <div class="panel-body line-break">
          <div class="row small-gap-row-below">
            <div class="col-md-1">
              <img src='http://localhost:50003/image/{{user.profilePicKey}}'
                   alt="Profile Picture" class="img-responsive img-rounded"
                   style="max-height: 50px; max-width: 50px;">
            </div>
            <div class="col-md-11">
                <span><strong>@{{post.username}}</strong></span>
                <small class="pull-right">18-May-2016 - 16:02</small>
              <hr class="small-margin-top"></hr>
            </div>
          </div>
          <div class="row">
            <div class="col-md-offset-1 col-md-11">
              <p froala-view="post.content"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

当我使用 img-responsive 类时，图像不应该自动调整大小以适应父级吗？什么情况下不应该溢出？

我正在设置 style="max-height: 50px; max-width: 50px;" 因为否则显示的图像非常小。正如它所说的'max-*'我认为这不应该破坏响应能力，因为它仍然是一个“灵活”的措施。

我怀疑这不是火箭科学，但由于我没有 CSS/Bootstrap/Frontend-in-general 的经验，我很难过。

更新：

我已按照建议将 col-md-* 更改为 col-xs，但它不起作用：

用户名被放置在图像的顶部。

更新 II

图片CSS：

element.style {
    max-height: 50px;
    max-width: 50px;
}
.img-rounded {
    border-radius: 6px;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%; (not applied!)
    height: auto;
}

img {
    vertical-align: middle;
}
img {
    border: 0;
}
* {
    -webkit-box-sizing: border-box; (not applied!)
    -moz-box-sizing: border-box; (not applied!)
    box-sizing: border-box;
}
Inherited from body.ng-scope
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
Inherited from html
html {
    font-size: 10px; (not applied!)
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
    font-family: sans-serif; (not applied!)
    -webkit-text-size-adjust: 100%; (not applied!)
    -ms-text-size-adjust: 100%;
}
Pseudo ::before element
:after, :before {
    -webkit-box-sizing: border-box; (not applied!)
    -moz-box-sizing: border-box; (not applied!)
    box-sizing: border-box;
}
Pseudo ::after element
:after, :before {
    -webkit-box-sizing: border-box; (not applied!)
    -moz-box-sizing: border-box; (not applied!)
    box-sizing: border-box;
}

更新 III

按照建议使用 col-xs-* 和 col-sm-*：

个人资料图片和用户名 (@grinch) 之间出现了空白。帖子内容也被推到了左边。

Answer 1

试着改成这个，这样它就不会崩溃。放置 col-md-xx 意味着对于小型设备它将打破 100% 宽度。

           <div class="col-xs-3 col-sm-1">
              <img src='http://localhost:50003/image/{{user.profilePicKey}}'
                   alt="Profile Picture" class="img-responsive img-rounded"
                   style="max-height: 50px; max-width: 50px;">
            </div>
            <div class="col-xs-9 col-sm-11">
                <span><strong>@{{post.username}}</strong></span>
                <small class="pull-right">18-May-2016 - 16:02</small>
              <hr class="small-margin-top"></hr>
            </div>