首页 > 解决方案 > 根据文本调整 Bootstrap 手风琴按钮高度

问题描述

如何从引导程序调整此手风琴的按钮高度,以便文本以与卡片主体相同的方式环绕。

我已经尝试过使用 CSS,但我还没有取得任何成功,也许这里有人知道?

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

抱歉,如果我在格式方面做错了什么,这是我第一次在这里发帖。

https://jsfiddle.net/2qonLz4b/2/

标签: javascriptcssangularjstwitter-bootstrapfrontend

解决方案


在您的自定义 css 文件中添加以下 CSS 代码:

.accordion .btn {
  white-space: normal;
}

推荐阅读