根据文本调整Bootstrap手风琴按钮的高度

时间:2019-01-18 11:58:32

标签: javascript css angularjs twitter-bootstrap frontend

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

我已经尝试过使用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/

1 个答案:

答案 0 :(得分:2)

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

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