我使用bootstrap縮略圖類來顯示如下圖所示的玩家列表。問題是一些玩家的名字超過了一行,而第二行的縮略圖沒有相同的維度。我遇到的真正問題是照片中第二行所示縮略圖的錯誤位置。我該如何解決它?下面是代碼: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>
對於名稱,你可以給縮略圖特定的高度。使用'white-space:nowrap'可能會使名稱超出縮略圖的邊界,因爲它可以防止換行符。但是對於錯誤的定位,這可能是您的腳本存在的問題。 –
這是經典的Bootstrap [高度問題](https://medium.com/wdstack/varying-column-heights-in-bootstrap-4e8dd5338643)。另見http://stackoverflow.com/questions/22310912/bootstrap-rows-with-columns-of-different-height和http://stackoverflow.com/questions/38730889/bootstrap-grid-system-new-line-不要看起來不錯/ 38745719 – ZimSystem