引导卡组内顶级属性的意外行为答案

【问题标题】：Unexpected behaviour on top attribute inside bootstrap card-group引导卡组内顶级属性的意外行为
【发布时间】：2020-08-02 14:02:43
【问题描述】：

我在引导卡组中有意外行为。

这是我得到的：

如您所见，第三张卡片图像的最高价值与其他卡片不同。但是所有这些卡片都有相同的 html 和 CSS 代码（除了这个页面中的 bootstrap 之外没有 JS）。

我尝试了什么：

删除第三张牌，然后我看到第二张牌（鞋子图像）有这个顶部属性问题。所以这不是卡的问题，而是作为引导卡组的容器的问题。

结果：

验证此图像的计算样式（检查 -> 样式 -> 计算），它告诉我图像的 top: 50% 和 position: relative 已计算。如果我更改顶部值，图像不会移动。

如果需要，这是我的代码：

代码

.card {
  border-radius: 9px !important;
  overflow: hidden;
}

.card img {
  margin: 0;
  position: relative;
  z-index: 2 !important;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  -ms-transition: top 0.8s ease;
  -webkit-transition: top 0.8s ease;
  -moz-transition: top 0.8s ease;
  -o-transition: top 0.8s ease;
  transition: top 0.8s ease;
}

.card:hover img {
  top: 15%;
  -ms-transition: top 0.8s ease;
  -webkit-transition: top 0.8s ease;
  -moz-transition: top 0.8s ease;
  -o-transition: top 0.8s ease;
  transition: top 0.8s ease;
}

.card img.rotated {
  transform: translate(-50%, -50%) rotate(20deg);
  -ms-transition: transform 0.8s ease, top 0.8s ease;
  -webkit-transition: transform 0.8s ease, top 0.8s ease;
  -moz-transition: transform 0.8s ease, top 0.8s ease;
  -o-transition: transform 0.8s ease, top 0.8s ease;
  transition: transform 0.8s ease, top 0.8s ease;
}

.card:hover img.rotated {
  transform: translate(-50%, -50%) rotate(0deg);
  -ms-transition: transform 0.8s ease, top 0.8s ease;
  -webkit-transition: transform 0.8s ease, top 0.8s ease;
  -moz-transition: transform 0.8s ease, top 0.8s ease;
  -o-transition: transform 0.8s ease, top 0.8s ease;
  transition: transform 0.8s ease, top 0.8s ease;
}


/** Dark-blue background **/
.card:before {
    background: #2b3b44;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(450px at 50% 50%);

    -ms-transition: 0.8s ease;
    -webkit-transition: 0.8s ease;
    -moz-transition: 0.8s ease;
    -o-transition: 0.8s ease;
    transition: 0.8s ease;
}

.card:hover:before {
    clip-path: circle(70px at 80% 10%);
}


/** Card text **/

.card-title {
  font-weight: 600;
}

.card p {
  font-size: 17px !important;
  margin-bottom: 10px !important;
}

.card:hover {
  color: unset !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}Welcome!{% endblock %}</title>

  <!-- stylesheets -->
  <link rel="stylesheet" href="page.css" type="text/css">

  <!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>
  <!-- body -->
  <div class="col-md-10 mx-auto">
    <div class="row my-3">

      <!-- cards container -->
      <div class="card-deck">

        <!-- card -->
        <div class="card m-3">
          <img alt="Outdoor" height="128px" width="128px" src="https://pngimg.com/uploads/backpack/backpack_PNG6323.png" />
          <div class="card-body">
            <h5 class="card-title">Outdoor</h5>
            <p>first line</p>
          </div>
        </div>
        <!-- end card -->

        <!-- card -->
        <div class="card m-3">
          <img class="rotated" alt="Running" height="128px" width="128px" src="https://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png" />
          <div class="card-body">
            <p>first line</p>
            <p>second line</p>
          </div>
        </div>
        <!-- end card -->

        <!-- card -->
        <div class="card m-3">
          <img alt="Others sports" height="128px" width="128px" src="https://storage.needpix.com/rsynced_images/bicycle-159680_1280.png"
          />
          <div class="card-body">
            <p>first line</p>
            <p>second line</p>
            <p>third line</p>
          </div>
        </div>
        <!-- end card -->

        <!-- card -->
        <div class="card m-3">
          <img alt="Music" height="128px" width="128px" src="https://cdn.pixabay.com/photo/2020/01/29/17/47/battery-4803149_960_720.png" />
          <div class="card-body">
            <p>first line</p>
          </div>
        </div>
      </div>
      <!-- end card -->

    </div>
    <!-- end cards container -->
  </div>

  <!-- bootstrap -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <!-- javascript -->
</body>

</html>

请告诉我关于这个问题的任何问题。

感谢您对此的任何想法！

编辑：我发现如果顶部属性值在“px”中，一切正常，但如果顶部属性的值在“%”中，则一切正常。我非常喜欢父标签和闭包标签“以了解图像是否不是比其他图像更小的父图像，但事实并非如此......

重新编辑：我发现问题出在哪里，但没有找到解决方案……在我的示例中，每张卡片都有不同的文字。然后内容高度不一样。在我的代码中，自行车卡的内容高度较高，删除后，鞋卡的文字内容更高。

在我放在这里的例子中，鞋卡的文本内容更高（三行），鞋卡的行为与其他人不同。

卡片组布局赋予每张卡片相同的高度，无论其内容如何。我很确定它会对顶级财产行为产生影响。

【问题讨论】：

如果您能为此创建一个最小可重现示例，那就太好了。包括展示您的问题的最低限度的 HTML 和 CSS。
嗯，您认为将我的代码放在标记中不足以重现它吗？ ://
不，我的意思是您的图像不会加载，因为您直接从您使用的任何模板引擎粘贴代码。如果您要添加占位符图像并且只需要最少量的 HTML 和 CSS，这将有助于调试问题。
哦，好的，我刚刚编辑了我的帖子
您发布的代码没有重现您描述的问题，请检查

标签： html css bootstrap-4

【解决方案1】：

如果您能够使用 flex，那么您可以对所有卡片执行以下操作：

<div class="card m-3 d-flex flex-column justify-content-center align-items-center">

    <img alt="Music" height="128px" width="128px" src="{{ asset("images/curriculum_vitae/hobbies/drum_set.png") }}"/>

    <div class="card-body">
        <h5 class="card-title">Musique</h5>
        <p>[...]</p>
    </div>

</div>

我已将 4 bootstrap helper classes 添加到您卡片的班级列表中。如果你想检查你的目标浏览器是否支持 flex，you can read here。

如果您不确定 flex 的工作原理，可以阅读 here。

【讨论】：

您好，感谢您的帮助！它工作了一半，事实是如果我删除我的顶部和左侧 css 属性，每个图像都有相同的行为。问题是我有一个悬停效果，将悬停的法师带到卡的顶部。但即使使用您的解决方案，第三张卡片图像也不会移动到顶部，因为它不受顶部属性的影响。所以感谢您的回答，但如果您知道为什么第三张卡片图像不受顶级属性的影响，它会很有用。
编辑：我发现如果顶部属性值在“px”中，一切正常，但如果顶部属性的值在“%”中，则一切正常。我非常喜欢父标签和关闭标签“
以了解图像是否不是比其他图像更小的父图像，但事实并非如此......

【解决方案2】：

已解决：这不是一个花哨的方法，但至少它解决了问题......

我在加载页面和调整页面大小时调用这行代码：

$(".card").each(function() {
    $(this).css("height", $(this).height() + "px");
});

此代码为每张卡片赋予了它自己的高度......但以 px 为单位。 Wich，由于某种原因，如果卡片具有以像素为单位的 CSS 恒定高度，我无法解释解决问题。

不知道的人，应该加个jQuery来让这段代码工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

【讨论】：

只是为了确保您知道 outerHeight() 是什么：api.jquery.com/outerHeight 如果您的容器变得更胖，也许您需要这个而不是 .height()。还有innerHeight。另外，请注意，此类动画通常不需要 jquery 才能工作。这只是额外的渲染延迟。