根据文本量调整引导按钮的高度

时间:2019-01-18 10:03:13

标签: javascript css angularjs twitter-bootstrap sass

如何根据文本调整按钮高度?这与基于我正在使用BootStrap类并且不知道这是否会影响结果这一事实而提出的其他问题有所不同。

我本以为会和这样做类似:

display: inline-block;
width: 50px;
height: 100px;
word-break: break-word;
overflow: hidden;

,但以上方法均无效。有人对此有解决方案吗?

这是我的HTML:

<div class="accordion collapsible-views" id="accordionExample">
  <div class="card">
    <div class="card-header" id={{collapseCard.headingId}}>
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" attr.data-target="#{{collapseCard.btnTargetId}}" aria-expanded="true" attr.aria-controls={{collapseCard.btnTargetId}}>
          {{collapseCard.btnTitle}}
        </button>
      </h5>
    </div>

这是我的CSS:

.btn {
        width: 100%;
        background: url(/assets/images/drop-down-icon.png) 100% no-repeat;
        text-align: left;
    }

    .card-header {
        border-bottom: 0px;
        border-radius: 10px;
        padding-left: 12px;
    }

    .card {
        border-radius: 10px;
        border: none;
    }

Button height should be adjusted

0 个答案:

没有答案