扩展单个引导卡的高度 - 并非所有卡都在行中

Question

我遇到了一个问题，我需要在 tile-module 布局中扩展单个引导程序 card 的高度，并且不会影响行中任何其他卡的高度。以下html结构是我所拥有的：

<div class="module tile-module">
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-4">
                <div class="card">
                    <div class="card-img-top">
                    </div>
                    <div class="card-body">
                        <h3>Title Here</h3>
                        <p class="card-text">Long text here...</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-img-top">
                    </div>
                    <div class="card-body">
                        <h3>Title Here</h3>
                        <p class="card-text">Long text here...</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-img-top">
                    </div>
                    <div class="card-body">
                        <h3>Title Here</h3>
                        <p class="card-text">Long text here...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的目标是动态隐藏/显示卡片的段落文本 div，具体取决于内容是否超过 X 个字符。我可以添加显示按钮的 JavaScript 逻辑，它可以很好地扩展单张卡片的高度。我现在遇到的问题是，当我单击单张卡片的“显示”逻辑并扩展本段的高度时，它会扩展该部分中所有卡片的高度，而不仅仅是单张卡片我正在调整。我将 css 样式直接添加到元素中，而不是单个类的所有元素中，以尝试仅针对单个卡而不是具有相同 css 类的所有卡：但这也无济于事。

我发现的每个在线问题都是 OP 在哪里尝试为连续的所有卡片扩展高度，这与我正在尝试做的相反，我无法找到解决方案。我宁愿不必重建整个布局来满足我的要求，但我还是新手，不知道如何最好地满足这个要求。

Answer 1

我没有很好的测试方法，但我假设 Bootstrap 中的 .card 正在使用 flexbox 来创建平铺布局。默认情况下，一行flex元素都尽量保持最高元素的高度。

我不太了解 Bootstrap，无法提供原生解决方案。但我可以告诉你我将如何在普通 CSS 中处理它。

您可以尝试将align-self: flex-start; 添加到您正在扩展的个人.card（我会切换一个覆盖Bootstrap 类的js 类），如here 所述。

但是，我敢打赌，这会导致其他行出现问题，并且您的卡会以奇怪的方式重叠。

解决这个问题的方法是创建一个包装器来获取 flex 布局属性。然后在展开时给出卡片的绝对位置、z-index 并允许内容展开其高度。

HTML：

<div class="cardContainer>
   <div class="card">card content ... </div>
</div>

还有 CSS：

.cardContainer {
   position: relative;
}
.card.expanded {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   /* no bottom position to allow content to expand it outside the container */
   z-index: 50 /*some higher number to put it at the top */
}