web-dev-qa-db-ja.com

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

Bootstrap 3以降、レスポンシブスタイルシートと標準スタイルシート用の個別のファイルはなくなりました。では、どのようにしてレスポンシブ機能を簡単に削除できますか？

twitter-bootstrapresponsive-designmedia-queriestwitter-bootstrap-3
84
kanarifugl

非デスクトップスタイルを非アクティブにするには、variables.lessファイルの4行のコードを変更するだけです。次のように、variables.lessファイルに画面幅のブレークポイントを設定します。

 //メディアクエリブレークポイント
 // --------------------------------- ----------------- 
 
 //極小画面/電話
 //注：非推奨の@ screen-xsおよび@ v3.0.1以降のスクリーンフォン
 @ screen-xs：1px; 
 @ screen-xs-min：@ screen-xs; 
 @ screen-phone：@ screen- xs-min; 
 
 //小さな画面/タブレット
 //注：v3.0.1 
 @で@ screen-smおよび@ screen-tabletを廃止screen-sm：2px; 
 @ screen-sm-min：@ screen-sm; 
 @ screen-tablet：@ screen-sm-min; 
 
 //中画面/デスクトップ
 //注：v3.0.1 
 @ screen-md：3px; 
 @ screen-で@ screen-mdおよび@ screen-desktopを非推奨md-min：@ screen-md; 
 @ screen-desktop：@ screen-md-min; 
 
 //大画面/広いデスクトップ
 //注：v3.0.1 
 @ screen-lgで@ screen-lgおよび@ screen-lg-desktopを非推奨： 9999px; 
 @ screen-lg-min：@ screen-lg; 
 @ screen-lg-desktop：@ screen-lg-min;

これにより、デスクトップスタイルのメディアクエリの最小幅が低く設定され、すべての画面幅に適用されます。 2calledchaosの改善に感謝します！一部の基本スタイルはモバイルスタイルで定義されているため、必ず含める必要があります。

編集：クリスは、bootstrapサイトのオンラインlessコンパイラでこれらの変数を設定できることに注意

104
Jay Douglass

これは official Bootstrap 3 release docs で説明されています：

レスポンシブビューを無効にする手順

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

  1. CSSドキュメントで言及されているビューポート<meta>を削除する（または追加しない）
  2. Max-width：none！important;のすべてのグリッド層の.containerでmax-widthを削除します。 width：970px;のような通常の幅を設定します。これがデフォルトのBootstrap CSSの後に来るようにしてください。オプションで、メディアクエリまたは一部のセレクターフで！importantを回避できます。
  3. Navbarを使用している場合、すべてのnavbarの折りたたみと展開の動作を元に戻します（ここでは表示するには多すぎるため、例を見てください）。
  4. グリッドレイアウトの場合、中/大クラスのクラスに加えて、またはその代わりに、.col-xs- *クラスを使用します。心配しないで、超小型のデバイスグリッドはすべての解像度に拡大するので、そこに設定します。

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

GetBootstrap.com/examples/non-responsive/ の例を参照してください

45
lborgav

あなたのbootstrap v3.1.1を無反応にすることがいかに簡単であるかを最近理解しました。これには、折りたたみしないnavbarsが含まれます。誰もがこれを知っているかどうかはわかりませんが、共有したいと思います。

応答しないBootsrap v3.1.1への2つのステップ

まず、non-responsive.cssとしてCSSファイル名を作成します。 bootstrap cssファイルの直後にテーマまたはリンクに追加してください。

次に、このコードをnon-responsive.cssに貼り付けます。

/* Template-specific stuff
 *
 * Customizations just for the template; these are not necessary for anything
 * with disabling the responsiveness.
 */

/* Account for fixed navbar */
body {
  min-width: 970px;
  padding-top: 70px;
  padding-bottom: 30px;
}

/* Finesse the page header spacing */
.page-header {
  margin-bottom: 30px;
}
.page-header .lead {
  margin-bottom: 10px;
}


/* Non-responsive overrides
 *
 * Utilitze the following CSS to disable the responsive-ness of the container,
 * grid system, and navbar.
 */

/* Reset the container */
.container {
  width: 970px;
  max-width: none !important;
}

/* Demonstrate the grids */
.col-xs-4 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

.container .navbar-header,
.container .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}

/* Always float the navbar header */
.navbar-header {
  float: left;
}

/* Undo the collapsing navbar */
.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}

.navbar-toggle {
  display: none;
}
.navbar-collapse {
  border-top: 0;
}

.navbar-brand {
  margin-left: -15px;
}

/* Always apply the floated nav */
.navbar-nav {
  float: left;
  margin: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  padding: 15px;
}

/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
  float: right;
}

/* Undo custom dropdowns */
.navbar .navbar-nav .open .dropdown-menu {
  position: absolute;
  float: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #fff !important;
  background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  color: #999 !important;
  background-color: transparent !important;
}

それがすべてでお楽しみください.. ^^

出典：non-responsive.css from getbootstrap.comの例 .

20
JiNexus

Bootstrapレスポンシブ機能を完全に削除する必要があり、次のスニペットで動作をオーバーライドすることになりました。

.container {
    width: 960px !important;
}

@media (min-width: 1px) {
  .container {
    max-width: 940px;
  }
  .col-lg-1,
  .col-lg-2,
[...]

完全なスニペット： https://Gist.github.com/ivanminutillo/855729

11
Ivan Minutillo

ソース： http://getbootstrap.com/getting-started/#disable-responsive

  1. CSSドキュメントで言及されているビューポート<meta>を省略します
  2. 単一幅の各グリッド層の.containerでwidthをオーバーライドします。たとえばwidth: 970px !important;これは、デフォルトのBootstrap CSSの後に来るようにしてください。オプションで、メディアクエリまたは一部のセレクターフで!importantを回避できます。
  3. Navbarを使用する場合、すべてのnavbarの折りたたみおよび展開動作を削除します。
  4. グリッドレイアウトの場合は、中/大クラスに加えて、またはその代わりに.col-xs-*クラスを使用します。心配しないで、超小型のデバイスグリッドはすべての解像度に拡大縮小します。
11
Sophy

Bootstrap 3 CSSを非応答機能とともに使用することにより、これを行うことができます

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

5
equisde

固定サイズのWebサイトが必要な場合は、これはかなり簡単です。

// Override container sizes
@container-sm:  700px;
@container-md:  700px;
@container-lg:  700px;

// Fixate media queries to tablet view only (lower viewports set to 0px, desired one to 1px, and the higher to ~9999px)

@screen-xs-min: 0px;
@screen-sm-min: 1px;
@screen-md-min: 9999px;
@screen-lg-min: 9999px;

// Disable responsive features such as navbar-collapse
@grid-float-breakpoint: 9999px;

.container-fluidを使用している場合を除き、以下も追加します。

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}
0
Hrvoje Golcic