引导缩略图位置[重复]

Question

我正在使用引导缩略图类来显示玩家列表，如下图所示。问题是，一些玩家的名字超过了一行，而出现了第二行，这对缩略图的尺寸不一样。我面临的真正问题是缩略图的位置错误，如照片第二行所示。我该如何解决？代码如下：

<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，而不是表格来显示团队成员。它反应灵敏，您不会遇到第二排的问题。

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