web-dev-qa-db-ja.com

bootstrapパネルの右側にアイコンを作成する方法は？

ブートストラップパネルに素晴らしいアイコンを配置する際に問題が発生しました。このアイコンをパネル見出しの右側に配置します。しかし、コードは機能しません。誰か助けてもらえますか？

<div class="panel panel-primary">
    <div class="panel-heading">
        Title
        <i class="fa fa-question-circle text-right"></i>
    </div>
    <div class="panel-body">
        Hello world!
    </div>
</div>

結果をプレビューする必要がある場合は、ここを確認してください： http://jsfiddle.net/7q7w0n76/

csstwitter-bootstraptwitter-bootstrap-3frontendfont-awesome
8
Mincong Huang

変更してみてくださいtext-rightからpull-right の中に fa fa-question-circleクラス。

例

<i class="fa fa-question-circle pull-right"></i>

これが JsFiddleリンクです 。

それが役に立てば幸い。

14
Alberto I.N.J.

これをCSSファイルに追加します。

.text-right {
    float: right;
}

ブートストラップを使用している場合は、クラスpull-rightを追加するとうまくいく場合があります。

最後に、FontAwesomeアイコンを追加してセマンティックHTMLを作成する場合は、<span>タグの代わりに<i>タグを使用します（ 説明 ）。

2
odedta