2017-05-12 18 views
0

UI Boostrap Accordionグループ項目のヘッダーセクションにボタンが必要です。私はマークアップを追加することができた、それは動作しますが、クラスはpull-rightクラスを追加するとすぐに中間(垂直)にはありません。 Plunkerを表示するにはClick here。クラスがなければ、ボタンの配置と配置が正しく行われます。UI Bootstrapアコーディオンヘッダーで(垂直中央)ボタンを整列できません

答えて

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

+0

、ありがとう!これを行うより簡潔な方法はありますか?私はクラスを作成して再利用できると思う。 –

+0

私はそれを行うより良い方法があると確信しています。私は何かをするために素早くハックする必要があるときはいつもフレックスボックスに行きます。 2つのアイテムがあるため、あなたが望む方法でのみ動作します。別のアイテムを追加した場合、 'space-between'はそれらを行全体に均等に配置します。しかし、ただ2つの項目のために、それは素晴らしい作品です。 – HaveSpacesuit

+0

私はSafariのソリューションとのアライメントの問題を見ています。何らかの理由で、ボタンが[ヘッダー]パネルの中央に不均一な方法で移動します。 ChromeとFirefoxは正常に動作します。それが何であるか、どんな考えですか? –

関連する問題