13

新しい更新された Bootstrap 3 RC1を使用してプロジェクトを行っています。

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

メニューに多くの項目があると、モバイルで自動的に折りたたまれたように折りたたまれないため、iPad や他のタブレットで壊れます (これは良いことです)。

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

ここに私のライブプロジェクトのスクリーンショットがあります:

-- 大画面のメニュー --

ここに画像の説明を入力

-- Ipad 横長のメニュー --

ここに画像の説明を入力

-- Ipad 縦長のメニュー --

ここに画像の説明を入力

-- モバイルのメニュー --

ここに画像の説明を入力

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

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

4

7 に答える 7

10

読んでください: 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 の横長の画面幅は 1024 ピクセルなので、メニューは折りたたまれません。iPad の縦画面の幅は 768 ピクセルなので、メニューは折りたたまれません。

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

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

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

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

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

グリッド行のプレフィックスとして「col-lg-」を使用します。"col-lg- " 要素は 992px (iPad の縦向き) の下に積み重ねられ、992px (iPad の横向き) の上で水平になります。

于 2013-08-08T13:07:04.270 に答える
5

私が見つけた同様の実装は機能しませんでした

これを独自に実現するスタイルがどこにも見つからず、結局これを見つけました - https://coderwall.com/p/wpjw4w

于 2014-10-23T20:46:53.333 に答える
5

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

たとえば、

@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;
  }
}
于 2014-08-24T20:14:05.897 に答える