时间戳

首页 > 解决方案 > Bootstrap 4：手风琴中的卡片标题不会使文本响应移动大小

html - Bootstrap 4：手风琴中的卡片标题不会使文本响应移动大小

问题描述

我在 bootstrap 4 中有一个手风琴。卡片标题中的文本没有响应，所以当它的长度大于卡片标题的宽度时，它会显示在外面。

<div class="card">
        <div class="card-header" id="headingEight">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
                    <p>1. Header which is not responsive so in mobile it does not display right</p>
                </button>
            </h5>
        </div>
        <div id="collapseEight" class="collapse" aria-labelledby="headingEight" data-parent="#accordion">
            <div class="card-body text-justify">
                Text here is responsive
            </div>
        </div>
    </div>

标签： htmltwitter-bootstrapbootstrap-4bootstrap-accordion

解决方案

换班：

.btn {
    white-space: nowrap;
}

至：

.btn {
    white-space: normal;
}

推荐阅读