レスポンシブサイトを制作する際、とても便利なCSSフレームワークなのが『Bootstrap』です。しかし、時々「レスポンシブを無効にして使いたい」と思う時があったりします。
この記事では、Bootstrapのレスポンシブを無効にして、固定幅でサイトを構築する方法を解説します。
Bootstrapの非レスポンシブは可能?
バージョン2系の時は通常のCSSとレスポンシブのCSSとでファイルが分かれていました。しかし、3系は一体化になっています。
色々調べたところ、公式にレスポンシブを無効にする方法が用意されていました。http://getbootstrap.com/getting-started/#disable-responsive →既にページは削除されています。
Bootstrap4では非レスポンシブの使用をサポートしないようです。 Bootstrapの非レスポンスでの使用はサポートしない(non-responsive.cssは提供しない)
https://cccabinet.jpn.org/bootstrap4/#global-changes
しかし、Bootstrap4では自分で多少の書き換えをすれば実現可能です。
Bootstrap4でレスポンシブを無効にする
BootstrapのCSSを上書する
『non-responsive.css』(ファイル名は任意)を作成し、Bootstrap本体のCSSよりも後に読み込みます。新規作成したCSSファイルにBootstrapの.containerのclassの横幅を上書きする設定を記述します。
.container {
min-width: 990px;
}
マークアップ
カラムはcol-lg -* 、col-md -* 、col-sm-*を指定せず、すべての画面サイズで共通のcol-*を利用します。以下がサンプルです。
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
Bootstrap3でレスポンシブを無効にする
Viewportを設定する
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
『non-responsive.css』を読み込む
まず、レスポンシブを無効にするCSSをダウンロードしましょう。 https://getbootstrap.com/examples/non-responsive/non-responsive.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 { padding-top: 70px; padding-bottom: 30px; } body, .navbar-fixed-top, .navbar-fixed-bottom { min-width: 970px; } /* Don't let the lead text change font-size. */ .lead { font-size: 16px; } /* Finesse the page header spacing */ .page-header { margin-bottom: 30px; } .page-header .lead { margin-bottom: 10px; } /* Non-responsive overrides * * Utilize 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; visibility: 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; } /* Undo form expansion */ .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; } /* Copy-pasted from forms.less since we mixin the .form-inline styles. */ .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; } /* Undo inline form compaction on small screens */ .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; }
ダウンロード、またはコピーしたものをBootstrapのCSSの下に読み込みます。ファイルを設置する場所は自分の環境に合わせてください。
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/non-responsive.css">
クラスは『col-xs-*』を指定する
タイトルの通り、グリッドシステムを使う時は必ずクラスに『col-xs-*』を指定して使いましょう。 『col-lg-*』や『col-md-*』ではダメですよ。