引导缩略图位置[重复]

Posted 2023-03-05

【中文标题】引导缩略图位置[重复]

【英文标题】：Bootstrap thumbnails position [duplicate]

【发布时间】：2017-08-10 05:42:33

【问题描述】：

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

<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"    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 height problem。另见***.com/questions/22310912/… 和***.com/questions/38730889/…

【参考方案1】：

您可以对名称使用 nowrap。这样他们就只有一条线 .nowrap white-space: nowrap ;

否则我建议使用 flexbox，而不是表格来显示团队成员。它反应灵敏，您不会遇到第二排的问题。

【讨论】：

nowrap 不好，因为我有像 Bastian SCHWEINSTEIGER 这样的长名字，它超出了边界。另外，我不能使用 flex box，因为我使用的是 bootstrap 3.x

【参考方案2】：

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

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

【讨论】：

您的解决方案每行显示 1 个缩略图。我不想要这个。此外，在更改页面大小时，像 SCHWEINSTEIGER 这样的长玩家名称会超出边界。

【参考方案3】：

.caption h4
   display: table;
 

.caption h4 .badge
display:table-cell;

【讨论】：

解决方案会截断长玩家名称的名称。我不想要这个。我不介意内容是否用于第二行并考虑为缩略图提供更大的尺寸。我只是不希望我在主要问题中显示的第一张照片中出现错误的显示。

再次没有。一样，甚至更糟。我附上了显示输出