Bootstrapのレスポンシブを無効にするには、コンテナの幅を固定し、極小のグリッドシステム階層（xs）を使用する。詳細については、レスポンシブの無効化に記載。
<meta name="viewport" content="width=device-width, initial-scale=1">が無いことに気をつけること。さらに、コンテナの幅をリセットし、折り畳みを防ぐためにナビゲーションバーが変更されている。基本的には問題なし。
ヘッドアップとして、ナビゲーションバーコンポーネントは、それを表示するためのスタイルがかなり具体的で詳細なので、やや難解である。デスクトップスタイルの表示を確実にするために再定義している。この実例の上部にあるナビゲーションバーを使用してサイトを構築すると、潜在的な問題があるかもしれない。
非レスポンシブなレイアウトは、固定要素の重要な欠点を強調する。固定ナビゲーションバーなどの固定コンポーネントは、ビューポートがページのコンテンツよりも狭くなったときにスクロール可能にならない。つまり、非レスポンシブのコンテナの幅が970px、ビューポートが800pxの場合、170px分のコンテンツが非表示になる可能性がある。
ブラウザのデフォルトの動作なので、これを回避する方法はない。唯一の解決策は、レスポンシブなレイアウトまたは固定されていない要素を使用することである。
/* このテンプレート固有のもの
*
* テンプレートだけのカスタマイズ。これらはレスポンシブの無効には必要なし
*/
/* 固定ナビゲーションバーのアカウント */
body {
padding-top: 70px;
padding-bottom: 30px;
}
body,
.navbar-fixed-top,
.navbar-fixed-bottom {
min-width: 970px;
}
/* リードテキストのフォントサイズを変更させない */
.lead {
font-size: 16px;
}
/* ページヘッダの間隔を調整 */
.page-header {
margin-bottom: 30px;
}
.page-header .lead {
margin-bottom: 10px;
}
/* 非レスポンシブの再定義
*
* 次のCSSを使用して、コンテナ、ナビゲーションバーのレスポンシブを無効にする
*/
/* .containerをリセット */
.container {
width: 970px;
max-width: none !important;
}
/* グリッドのデモンストレーション（不要なら削除） */
.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;
}
/* 常にナビゲーションバーを左寄せ */
.navbar-header {
float: left;
}
/* 折りたたみ中のナビゲーションバーを元に戻す */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}
.navbar-brand {
margin-left: -15px;
}
/* ナビゲーションバーを常に左寄せに適用 */
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding: 15px;
}
/* 上記でfloatを再定義したので右寄せ用に再設定 */
.navbar-nav.navbar-right {
float: right;
}
/* カスタムのドロップダウンを元に戻す */
.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;
}
/* フォームの展開を元に戻す */
.navbar-form {
float: left;
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/* .form-inlineスタイルをミックスインするので、forms.lessからコピーして貼り付け */
.navbar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.navbar-form .form-control-static {
display: inline-block;
}
.navbar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
width: auto;
}
.navbar-form .input-group > .form-control {
width: 100%;
}
.navbar-form .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio,
.navbar-form .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio label,
.navbar-form .checkbox label {
padding-left: 0;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
.navbar-form .has-feedback .form-control-feedback {
top: 0;
}
/* 小サイズ画面での横並びフォームの圧縮の取消 */
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-inline .form-control-static {
display: inline-block;
}
.form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control {
width: auto;
}
.form-inline .input-group > .form-control {
width: 100%;
}
.form-inline .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .radio label,
.form-inline .checkbox label {
padding-left: 0;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Bootstrap用の非レスポンシブのテンプレート</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- このテンプレートのカスタムスタイル--> <link href="css/non-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- 固定ナビゲーションバー --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <!-- モバイルナビゲーションバーの切替ボタンは、レスポンシブを実装しない場合は不要なので安全に削除可能 --> <a class="navbar-brand" href="#">プロジェクト名</a> </div> <!-- .navbar-collapseクラスと.collapseクラスは#navbarから削除 --> <div id="navbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">ホーム</a></li> <li><a href="#about">概要</a></li> <li><a href="#contact">要望</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">見出し</li> <li><a href="#">リンク</a></li> <li><a href="#">その他のリンク</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="search" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">送信</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul> </div><!--/#navbar --> </div> </nav> <div class="container"> <div class="page-header"> <h1>非レスポンシブBootstrap</h1> <p class="lead">Bootstrapのレスポンシブを無効にするには、コンテナの幅を固定し、極小のグリッドシステム階層を使用する。...</p> </div> <h3>何が変わる</h3> <p>...</p> ... <h3>非レスポンシブ・グリッドシステム</h3> <div class="row"> <div class="col-xs-4">3分の1</div> <div class="col-xs-4">3分の1</div> <div class="col-xs-4">3分の1</div> </div> </div><!-- /.container --> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="js/bootstrap.min.js"></script> </body> </html>