引导缩略图位置

Question

我正在使用bootstrap缩略图类来显示球员列表，如下面的照片所示。问题是，一些球员的名字超过了一行，并去了第二行，这不会使缩略图的尺寸相同。我面临的真正问题是照片中第二行所看到的缩略图的错误位置。我怎么才能修复它？代码如下：

<div class="row">
  <div ng-repeat="player in $ctrl.players">
  <div class="col-sm-4 col-md-3">
    <div class="thumbnail">
      <img ng-src="{{player.imgpath}}" height="100" width="121" alt="" style="border-radius: 100%"/>
      <div class="caption">
        <h4><span class="badge">{{player.jersey}}</span> {{player.name}}</h4>
        <table class="table">
          <tr>
            <td><b>Position</b></td>
            <td>{{player.position}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  </div>
</div>

​

​

Answer 1

您可以在名称上使用nowrap。这样它们将只有一行.nowrap { white-space: nowrap ; }

否则，我建议使用flexbox，而不是tables来显示团队成员。它是响应式的，你不会遇到像第二排那样的问题。

Answer 2

可以使用display:inline-block和float:none；

.col-md-*,.col-sm-*,.col-xs-*{
 float:none;
 display: inline-block;
margin-left: -4px;
vertical-align: top;
}

Answer 3

.caption h4{
   display: table;
 }

.caption h4 .badge{
display:table-cell;
}