web-dev-qa-db-ja.com

twitter bootstrap issue：ドロップダウンヘッダーのキャレットを右揃えにします

キャレットの正しい配置に問題があります。スパンで.pull-rightを使用すると、右上隅に移動します。

どうすれば再び垂直方向の中央に配置できますか？また、テキストを左に揃えたい

http://www.bootply.com/r8x7g5Bw5R

                    <div class="btn-group cust-dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><span>test</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">test</a></li>
                        <li><a href="#">tes2</a></li>
                        <li><a href="#">test3</a></li>
                    </ul>
                </div>

cSS

.cust-dropdown {
width: 200px;}
drop-down-menutwitter-bootstrap-3caret
21
Franckl
.caret {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
    left: 90%;
    top: 45%;
    position: absolute;
}

絶対位置と上と左の割合を使用して、ドロップダウン内でキャレットを右に揃えることができました。 Chrome、IE、およびFFで動作します。

[〜＃〜] edit [〜＃〜]

前のコードは機能しますが、キャレットのスタイルを変更します。スタイルを維持したまま位置を変更したい場合は、Bootstrapの.caretクラスを拡張するだけです。

.caret {
    position: absolute;
    left: 90%;
    top: 45%;
}
26
FiveTools

この問題には、はるかに簡単な解決策があります。このスタイルは、既定のレイアウト（デフォルトのbootstrapスタイル以外）に依存しないため、最も自然に見え、すべての使用に最も反応する必要があります。

.dropdown > .btn > .caret {
  float: right;
  margin: 6px 0;
  // if you are using Less, the you can reuse the actual vertical padding
  // margin: @padding-base-vertical 0;
}
11
pjs