Bootstrap缩略图位置

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

来源

2017-03-18 EddyG

对于名称，你可以给缩略图特定的高度。使用'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

您可以在名称中使用NOWRAP。这样他们只会是一条线 .nowrap { white-space: nowrap ; }

否则我会建议使用flexbox，而不是表来显示团队成员。它的响应速度很快，而且不会像第二排那样出现问题。

来源

2017-03-18 18:41:27

当我有像巴斯蒂安SCHWEINSTEIGER这样的长名字时，nowrap不好，它会走出边界。另外，由于我使用bootstrap 3.x – EddyG

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

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

来源

2017-03-18 18:50:19

，因此我无法使用弹性盒。您的解决方案每行显示1个缩略图。我不想要这个。此外，当改变页面大小时，像SCHWEINSTEIGER这样长的球员名称远远超出边界。 – EddyG

.caption h4{ 
    display: table; 
} 

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

来源

2017-03-18 19:15:37

该解决方案截断长玩家名称的名称。我不想要这个。我不介意内容是否适用于第二行，并且认为缩略图的尺寸较大。我只是不想在主要问题中显示的第一张照片中出现错误的显示。 – EddyG

再次没有。相同甚至更糟。我附上了显示输出 – EddyG

Bootstrap缩略图位置

回答

相关问题