3

私は Twitter Bootstrap とそのレスポンシブ デザインを上部の典型的な Twitter Bootstrap ナビゲーション バー メニューに使用しています。

そこには、いくつかのリンクとドロップダウン メニューがあります。ブラウザのサイズを768px以下に変更すると、新しい種類のナビゲーション メニューに変わります。

これはすべてそのままで問題なく動作しますが、私が望んでいるのは、ドロップダウン メニューも展開されていることです。

今起こっていることは、ドロップダウン メニューがまだ折りたたまれていることです。それを開くと、そのメニューコンテナ内にスクロールバーが作成されますが、これは本当に好きではありません。

ここに私が意味するもののスクリーンショットがあります:

ここに画像の説明を入力

例: http://getbootstrap.com/examples/jumbotron/

Dropdownメニューの横に醜いスクロールバーを作成しないように、開く/閉じるリンクを削除し、そのメニュー内にすべての項目をリストするにはどうすればよいですか?

4

2 に答える 2

7

問題を 3 つの部分に分割できます。

1.スクロールバー

デフォルトでは、ドロップダウン メニューは 340px の固定 (最大) の高さを取得します (およびoverflow-y:auto も参照してください: Twitter ブートストラップ 3 navbar navbar-right outside navbar-collapse )。

max-height: 340px;navbar.less から削除して (行 52 )、Bootstrap を再コンパイルすることで、この max-height を元に戻すことができます。または、文書内の Bootstrap の css の後にいくつかの css を追加します。

@media(max-width:767px)
{    
.navbar-collapse {
     max-height: none;
}
}

メニューの高さが画面の高さになると、ナビゲーション バーの位置が固定されているため、コンテンツをスクロールできないことに注意してください。

2.折りたたみ時にドロップメニューを開く

一見すると、折りたたみ時にドロップメニューにオープン クラスを追加する必要がありますが、dropdown.js の clearmenus 関数はこのクラスを削除します。display:block を追加すると、ドロップダウン メニューが表示されますが、その状態 /display は折りたたまれていないようになります。

open解決策は、clearmenus によって削除されないクラスと同じスタイルのクラスを追加することです。

  $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
  $('.navbar-collapse .dropdown-toggle').parent().addClass('opened');
  });

オープン クラスにオープン クラスと同じスタイルを与えるには、.less ファイルを変更し、その後 Bootstrap を再コンパイルする必要があります。

navbar.less (行: 215)

// Dropdowns get custom display when collapsed
.open .dropdown-menu, .opened .dropdown-menu {

dropdown.less 内 (行: 119)

// ドロップダウンのオープン状態 .opened, .open {

サイズ変更

上記では、（画面のサイズを変更して）折りたたみを元に戻した後もドロップダウン メニューが表示されたままになり、Bootstrap の CSS の後に css を追加することを防ぎます（これを Less ファイルに追加することもできます）。

@media(min-width:768px)
{    
.nav > li.opened .dropdown-menu {display: none;}
.nav > li.open .dropdown-menu {display: block;}
}

ドロップダウン内のリンクのスタイル

navbar は navbar-inverse を使用してスタイルを設定します ( https://stackoverflow.com/questions/18936357/using-multiple-navbars-with-twitters-bootstrap-3/18936358#18936358も参照) Navbar-inverse はで定義されますnavbar.less も。opend クラスのリンクの色も設定するには、次を使用します。

@media (max-width: @screen-xs-max) {
  // Dropdowns get custom display
  .open .dropdown-menu, .opened .dropdown-menu {

3. ドロップダウン リンクを削除する

ブートストラップの CSS の後の css:

@media(max-width:767px)
{    
.nav > li > a.dropdown-toggle{display:none;}
}

デモ: http://jsfiddle.net/pgK4y/

参照: https://github.com/twbs/bootstrap/issues/10758

于 2013-09-22T11:41:39.273 に答える