无法对齐 UI Bootstrap 手风琴 header 中的 (vertical-middle) 按钮

Question

我需要 UI Boostrap Accordion 组项目的 header 部分中的按钮。我能够添加标记并且它可以工作，但是当我添加 class pull-right 时按钮不在中间（垂直）。 Click here 查看 Plunker。没有 class，按钮正确定位和对齐。

Answer 1

将 span 环绕在 uib-accordion-heading 内的文本和按钮周围。使用 display:inline-flex; width: 100%; justify-content: space-between; align-items: baseline;.

设置跨度样式

<uib-accordion-heading>
  <span style="display:inline-flex; width: 100%; justify-content: space-between; align-items: baseline;">
    I can have markup, too! <button class="btn btn-primary btn-sm">OPEN</button>
  </span>
</uib-accordion-heading>

Updated plunker

无法对齐 UI Bootstrap 手风琴 header 中的 (vertical-middle) 按钮

Unable to align (vertical-middle) button in UI Bootstrap Accordion header

angular-ui-bootstrap

twitter-bootstrap-3