Question

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

这就是我现在所拥有的：

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

你可以在上面看到（IPhone 6 Plus）＆＃34; @grinch ......＆＃34;线被推倒了。

那是我的代码：

<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 =＆＃34; max-height：50px; max-width：50px;＆＃34; 因为否则显示的图像非常小。正如它所说＆＃39; max - *＆＃39;我认为这不应该打破响应能力，因为它仍然是一个灵活的＆＃34;测量。

我怀疑使用它并不是火箭科学，但由于我没有使用CSS / Bootstrap / Frontend-in-general，我遇到了困难。

更新

我已按照建议将col-md- *更改为col-xs，但它没有工作：

用户名位于图片顶部。

更新II

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

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

1 个答案: