[Bootstrap4対応] Bootstrapのレスポンシブを無効にする方法

レスポンシブサイトを制作する際、とても便利な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でレスポンシブを無効にする

head内に以下の記述があれば削除します。 以下のように記述されている部分です。

<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-*』ではダメですよ。