twitter-bootstrap - Twitter Bootstrap 3 でレスポンシブ機能を削除するには?

Question

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

score 104 · Accepted Answer

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

// メディア クエリのブレークポイント
// ------------------------------------------------ --

// 超小型画面 / 電話
// 注意: @screen-xs と @screen-phone は v3.0.1 で非推奨になりました
@screen-xs: 1px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;

// 小さい画面 / タブレット
// 注意: @screen-sm と @screen-tablet は v3.0.1 で廃止予定
@screen-sm: 2px;
@screen-sm-min: @screen-sm;
@screen-タブレット: @screen-sm-min;

// ミディアムスクリーン / デスクトップ
// 注意: @screen-md と @screen-desktop は v3.0.1 で非推奨になりました
@screen-md: 3px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;

// 大画面・ワイドデスクトップ
// 注意: @screen-lg と @screen-lg-desktop は v3.0.1 で非推奨になりました
@screen-lg: 9999px;
@screen-lg-min: @screen-lg;
@screen-lg-デスクトップ: @screen-lg-min;

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

編集: chris は、ブートストラップサイトのオンラインレスコンパイラでこれらの変数を設定できることを指摘しています。

score 45 · Accepted Answer

これは、公式の Bootstrap 3 リリースドキュメントで説明されています。

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

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

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

max-width: none !important; を使用して、すべてのグリッド層の .container の max-width を削除します。width: 970px; のような通常の幅を設定します。これがデフォルトの Bootstrap CSS の後にあることを確認してください。必要に応じて、メディアクエリまたはセレクター fu を使用して !important を回避できます。

ナビゲーションバーを使用している場合は、ナビゲーションバーの折りたたみと展開のすべての動作を元に戻します (これはここで示すには多すぎるため、例をのぞいてみてください)。

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

IE8 にはまだ Respond.js が必要です (メディアクエリがまだそこにあり、取得する必要があるため)。これは、Bootstrap の「モバイルサイト」を無効にするだけです。

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

score 20 · Accepted Answer

最近、ブートストラップ v3.1.1 を非応答にするのがいかに簡単かを理解しました。これには、折りたたまれないナビゲーションバーが含まれます。全員が知っているかどうかわかりませんが、共有したいと思います。

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

まず、non-responsive.css という名前の css ファイルを作成します。ブートストラップ 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;
}

それだけです。お楽しみください..^^

ソース: getbootstrap.comの例からのnon-responsive.css。

score 11 · Accepted Answer

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

.container {
    width: 960px !important;
}

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

完全なスニペット: https://gist.github.com/ivanminutillo/8557293

score 5 · Accepted Answer

これは、Bootstrap 3 CSS をレスポンシブ機能で使用することで実現できます。

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

score 0 · Accepted Answer

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

// 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;
}

score -2 · Accepted Answer

www.goo.gl/2SIOJjを見てください。これは進行中の作業ですが、役に立つかもしれません。

デスクトップバージョンとレスポンシブバージョンのどちらが必要かを定義するために Cookie を使用します。ページのフッターには 2 つのスパンがあり、general.js はクリックを処理するスクリプトです。

        <div class="col-xs-6" style="text-align:center;"><span class="make_desktop">Desktop</span></div>
        <div class="col-xs-6" style="text-align:center;"><span class="make_responsive">Mobile</span></div>

function setMobDeskCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value + "; path=/";
    window.location.reload();
}

$(function() {
    $(".make_desktop").click(function() {
        setMobDeskCookie('deskmob', 1, 3650);
    });
    $(".make_responsive").click(function() {
        setMobDeskCookie('deskmob', 0, 3650);
    });
});`enter code here`

すべてのカスタム css を 2 つのファイルに分割することになりました。ブートストラップナビゲーションは使用しませんが、独自のナビゲーションを使用しているため、それがカスタムスタイルの大部分であるため、問題全体を解決することはできませんが、私にとってはうまくいきます。

また、グリッドが大画面バージョンを維持するように強制する non-responsive.css も作成しました

モバイルを選択した場合、ロード/エコーします

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

and load these stylesheets
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style-responsive.css?modified=1402758346" />

デスクトップを選択した場合、/echo をロードします

<meta name="viewport" content="width=1024">    


        <!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

        <!-- Main CSS -->
        <link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/non-responsive.css?modified=1402758635" />

non-responsive.css は、bootstrap のオーバーライドがあるもので、私の懸念はレイアウトであるため、ナビゲーションを独自の方法で処理するため、css と他のビットが他の css ファイルにあることを考えると、そこにはあまりありません。

私のセットアップは、デスクトップブラウザでもデスクトップとして動作することに注意してください

twitter-bootstrap - Twitter Bootstrap 3 でレスポンシブ機能を削除するには?

8 に答える 8

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

Related

Reference

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