3

Twitter Bootstrap の navbarを分割ボタンのドロップダウンでいっぱいにする (かなり簡単な) 方法はありますか?

いわゆるメイン ボタンを、そのメイン ボタンに属するアイテム、または何らかの形で関連するアイテムを含むドロップダウン メニューから分離する方法を探しています。

それぞれに 2 つのナビゲーション バー項目を追加しようとしました。最初はメイン ボタンのみ(キャプションとアイコンあり) を含み、2 つ目はドロップダウンのみ (キャプションとアイコンなし) を含みます。

ここに画像の説明を入力

ここに画像の説明を入力

しかし、結果はあまり受け入れられません。主な理由:

  • (1 つのボタンのふりをしている 2 つの部分のうちの) 1 つの部分だけをマウスでホバーし、
  • いわゆるメインボタンとその偽のドロップダウンの間に視覚的な溝があります。
  • Bootstrap にはいくつかの小さなバグ (私が思うに) があり、アイテムにキャプションとアイコンがない場合、下矢印の下の領域全体をホバーしない原因となります。

この問題に対する他のオプション、可能性、または回避策はありますか? それとも期待しすぎですか？

4

2 に答える 2

3

メインボタンをドロップダウンから分割したい理由がわかりません。すでに別の構造になっています (ボタン グループ クラスによってバインドされています)。小さな虫は見当たりません。ガターについては、.btncss.navbar .btnルール.btn-navbarが異なります。ボタンとドロップダウンを一度ホバリングするには、追加の css クラスを追加/削除し、これを mouseenter と mouseleave に追加します。http://bootply.com/66352 を参照してください。

.btn-danger ボタンをホバーするための追加の CSS ルール:

.buttonhover-danger
{
  color: #ffffff;
  background-color: #bd362f;
  background-image: none;
  *background-color: #a9302a;
}

.btn-danger クラスですべてのボタン/ドロップダウンをホバーします。

$('.btn-danger').mouseenter(function(){$('.btn-danger').addClass('buttonhover-danger')});
$('.btn-danger').mouseleave(function(){$('.btn-danger').removeClass('buttonhover-danger')});
于 2013-07-03T13:23:08.560 に答える