web-dev-qa-db-ja.com

Bootstrap 3 Ipadでメニューが折りたたまれていない

私はを使用してプロジェクトをやっています 新しい更新 ブートストラップ3 RC1 。

新しいBootstrap 3の新機能があります。これは以前のバージョンとは大きく異なります。ほとんどの変更を考えましたが、解決できないものがあります。

メニューに多くのアイテムがある場合、モバイルで自動的に折りたたまれるように、iPadや他のタブレットで壊れることはありません（これは良いことです）

IPadをモバイルのように「強制」し、折りたたまれたメニューを表示する方法を知りたい-多数のアイテムがあり、特定の画面で小さい場合にメニューを折りたたむ方法

私のライブプロジェクトのスクリーンショットは次のとおりです。

-大画面のメニュー-

enter image description here

-Ipad Landscapeのメニュー-

enter image description here

-Ipad Portraitのメニュー-

enter image description here

-モバイルのメニュー-

enter image description here

IPadをモバイルのように動作させたいだけです。ポートレートは、メニューではなくコンテンツに関してはモバイルのように機能することに注意してください。

助言がありますか？ありがとう

menucollapsenavbartwitter-bootstrap-3
13
gil hamer

お読みください： http://bassjobsen.weblogs.fm/Twitter-bootstrap-3-breakpoints-and-grid/

メニューの折りたたみは、lessファイルで定義されます。 （最新バージョンを以下からダウンロードしてください： https://github.com/twbs/bootstrap ）

Variables.lessには、@grid-float-breakpoint: @screen-tablet;があります。@ screen-tabletは768pxです。

そのため、デフォルトでは、画面の幅が768px未満の場合、メニューは折りたたまれます。

IPadランドスケープの画面幅は1024pxなので、メニューは折りたたまれません。 iPadの縦画面の幅は768ピクセルなので、メニューは折りたたまれません。

Navbar.lessも参照してください。

// Responsive navbar
// --------------------------------------------------

@media screen and (min-width: @grid-float-breakpoint) {

この動作を変更するには、@ grid-float-breakpoint b.eを767に変更し、cssファイルを再コンパイルする必要があります。

NBまた、「ポートレートは、メニューに関してではなく、コンテンツに関してはモバイルのように機能することに注意してください。」

グリッド行のプレフィックスとして「col-lg-」を使用します。 「col-lg-」要素は、992px（ipad縦）の下にスタックされ、992px（ipad横）の上に水平になります。

10
Bass Jobsen

同様にこの問題に出くわしました。あなたが訪問することをお勧めします：

ブートストラップのカスタマイズ

フィールドを見つけます@grid-float-breakpointそして、メニューを折りたたむ画面幅に設定します。そこで、前のセクションの変数、つまりMedia queries breakpoints適切なポイントを設定します。

また、少し時間を取って、使用可能なすべての変数を確認して変更します。適切にカスタマイズされたBootstrapパッケージを作成すると、開発作業の時間を節約できます。

9
Maciej Gurban

私が見つけた劣らず実装は動作しませんでした

これをどこでも自分で実現するスタイルを見つけることができませんでしたが、結局これを見つけました- https://coderwall.com/p/wpjw4w

6
Horse

あまり使用していない貧しい人々のために、bootstrap.cssを修正し、768pxから992pxのブレークポイントを持つnavbarに関連付けられたメディアクエリを変更する必要があります。

たとえば、変更

@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}

に：

@media (min-width: 992px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
5
checkmate711

代わりに@media（max-width：768px）クエリを767pxに変更することで問題を修正できました。上記のリンクの1つはiPadの1pxの問題を参照しており、これは別の方法で壊れ、代わりにWebサイトのモバイルバージョンを強制していました。

1
Joe Kuzma

反対の問題がありました。 iPadでは、navbarは（予想どおり）折りたたまれていませんが、折りたたまれたnavbarのスタイルが適用されました。次のように_-1_と一致するように_$grid-float-breakpoint_を追加して、折りたたまれたnavbarのメディアクエリを変更することで解決しました。

_@media (max-width: $screen-sm-min - 1) {
//styles for collapsed navbar (which won't show up on iPad portrait)
}
_
0
bart

誰かが標準のbootstrap.cssファイルを使用している場合、3つの場所で変更する必要がありました。

3780行目

/*changed from 768 to 992 */
    @media (min-width: 992px) {
     .navbar-header {
      float: left;
     }
   }

3799行目

 /* changed from 768 to 992 */
    @media (min-width: 992px) {

3924行目

/*changed from 768 to 992 */
@media (min-width: 992px) {

私はこれが誰かを助けることを願っています:)

0
Jon