2017-03-18 320 views
0

我使用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> 

enter image description here

+0

對於名稱,你可以給縮略圖特定的高度。使用'white-space:nowrap'可能會使名稱超出縮略圖的邊界,因爲它可以防止換行符。但是對於錯誤的定位,這可能是您的腳本存在的問題。 –

+1

這是經典的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

回答

0

您可以在名稱中使用NOWRAP。這樣他們只會是一條線 .nowrap { white-space: nowrap ; }

否則我會建議使用flexbox,而不是表來顯示團隊成員。它的響應速度很快,而且不會像第二排那樣出現問題。

+0

當我有像巴斯蒂安SCHWEINSTEIGER這樣的長名字時,nowrap不好,它會走出邊界。另外,由於我使用bootstrap 3.x – EddyG

0

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

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

,因此我無法使用彈性盒。您的解決方案每行顯示1個縮略圖。我不想要這個。此外,當改變頁面大小時,像SCHWEINSTEIGER這樣長的球員名稱遠遠超出邊界。 – EddyG

0
.caption h4{ 
    display: table; 
} 

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

該解決方案截斷長玩家名稱的名稱。我不想要這個。我不介意內容是否適用於第二行,並且認爲縮略圖的尺寸較大。我只是不想在主要問題中顯示的第一張照片中出現錯誤的顯示。 – EddyG

+0

再次沒有。相同甚至更糟。我附上了顯示輸出 – EddyG