web-dev-qa-db-ja.com

Twitterを使用する方法Bootstrap 3応答しないサイトの場合？

彼らのページで読むことができるように、新しい Bootstrap は「モバイルファースト」です：

With Bootstrap 2、フレームワークの主要な側面にオプションのモバイルフレンドリースタイルを追加しました。With Bootstrap 3、we 'プロジェクトを最初からモバイルフレンドリーになるように書き直しました。オプションのモバイルスタイルを追加する代わりに、コアに直接焼き付けます。実際、Bootstrap=はモバイル優先です。モバイル優先スタイルは、個別のファイルではなくライブラリ全体で見つけることができます。

応答性を無効にするにはどうすればよいですか？自分のサイトがタブレットやモバイル用に再配置されないようにしたい。

twitter-bootstrapresponsive-designtwitter-bootstrap-3
29
Fred K

詳細な手順については、 Twitterの使用方法Bootstrap

Bootstrap documentation から（およびいくつかの説明）：

レスポンシブ機能を無効にするには、次の手順を実行します。以下の変更されたテンプレートで実際に使用してください。

1）CSSドキュメントに記載されているビューポート<meta>を削除（または追加しないでください）

自明

2）max-width：none！importantを持つすべてのグリッド層の.containerのmax-widthを削除します。 width：970px;のような通常の幅を設定します。これはデフォルトのBootstrap CSSの後に来るようにしてください。オプションで、メディアクエリまたはセレクターfuで！importantを回避できます。

このスタイルを追加します。

.container{
  max-width: none !important;
  width: 970px;
}

3）navbarsを使用する場合、navbarのすべての折りたたみおよび展開動作を元に戻します（ここでは表示するには多すぎるので、例を覗いてください）。

variables.lessを開き、変数を設定します。

@grid-float-breakpointから0

@screen-xs-maxから0（これは修正されます; here を読んでください）

4）グリッドレイアウトの場合、中/大クラスに加えて、またはその代わりに、.col-xs- *クラスを使用します。心配しないで、超小型のデバイスグリッドはすべての解像度に拡大するので、そこに設定します。

自明

IE8用のRespond.jsが必要になります（メディアクエリがまだ存在し、ピックアップする必要があるため）。これにより、Bootstrapの「モバイルサイト」が無効になります。

44
Fred K

ソースへの主要な改造がなければ、それは不可能だと思われます。

次のリンクに、必要な変更の詳細が記載されています。 http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

5
Chris

Bootstrap 3つのドキュメントには、実際にこの問題に関する段落が含まれています。 http://getbootstrap.com/getting-started/#disable-responsive

4
Ozmodiar

まあ、私は同じものを探していました。私はまだチェックアウトしていないので、その機能を証明することはできませんが、レスポンシブを削除したバージョンは次のとおりです。

https://github.com/bassjobsen/non-responsive-tb

3
BMCwebdev

Jay Douglassの回答をご覧ください。メディアクエリブレークポイント変数をオーバーライドしてレスポンシブ機能を無効にする方法について詳しく説明しています。それは最小限の変更を必要とするシンプルなソリューションです。

Twitterのレスポンシブ機能を削除する方法Bootstrap 3？

0
Chris

小さな努力でそれを達成できます。

1）ビューポートを削除する

2）.container{ max-width: none !important; width: 970px; }をcssファイルに追加します

3）navbarを使用している場合は、すべてのnavbarの折りたたみと展開の動作を元に戻します

4）

グリッドレイアウトの場合、中/大クラスのクラスに加えて、またはその代わりに、.col-xs- *クラスを使用します。心配しないで、超小型のデバイスグリッドはすべての解像度に拡大するので、そこに設定します。

以下のリンクをたどることができます：

http://getbootstrap.com/getting-started/#disable-responsive

0
Caner Şahin