Question

如何获得具有垂直滚动的卡文本部分的固定高度引导卡？

<div class="card" style="height:300px">        <-- non scrollable
    <div class="card-body">                    <-- non scrollable
        <h5 class="card-title">Card title</h5> <-- non scrollable
        <p class="card-text">This portion and only this portion will have a very long text so much so that the vertical scroll bar may appear when required.</p>
    </div>
</div>

Answer 1

您需要应用此CSS

**wrap this**
.card-text { height: 42px; overflow-x: scroll; width: 100%; }

.card-text p { width: 650px; word-break: break-word; }

Answer 2

您必须用可滚动容器包装.card-text。然后设置可滚动容器overflow-y: auto;。

也不要忘记为可滚动容器设置height。如果height默认为自动，则滚动条将不会出现。

https://codepen.io/blackcityhenry/pen/LXOOgW

固定高度的Bootstrap卡，带有垂直可滚动的卡文字

2 个答案: