DrupalでBoostrap導入より外部設置検索条件（チェックボックス）のレイアウトが崩れる

DrupalのBootstrapテーマが細かいところまでDrupalの各部分を対応しきれていない

• 背景：Drupal7.56、Bootstrap7.x-3.13
• BootstrapテーマがDurpalの各部分をすべて対応しきれていない現状です。
• 前回紹介した「DrupalでBoostrap導入よりBetter Exposed Filtersの検索条件折りたたむ機能喪失」がその例の一つです

今回の例ではViewsの外部設置フィルター（チェックボックス）のレイアウトが崩れ

• モジュール（Views）で、外部設置フィルター（例：カテゴリ、チェックボックスでフィルター一覧表示）を作成
• 以下のイメージのようにチェックボックスのフィルターレイアウトが崩れています
  

原因：Bootstrapのフォーム関連css（クラス名：.form-control）のプロパティにミスマッチ

• 主な原因としては、Bootstrapのform-controlクラスをチェックボックスのラップdivに追加されたせいだと思います
  • Bootstrapのform-controlクラスに、高さが34pxに固定してしまいました

    .form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

     

修正：cssでチェックボックスのラップdivのプロパティを修正

• Boostrapのカスタムstyle.cssに以下のcssコードを追加して、外部設置フィルター（チェックボックスのラップdiv）を修正します

  .views-exposed-form .views-exposed-widget .form-item.form-type-select.form-group .form-control.form-checkboxes {
    width: inherit;
    height: inherit;
  }
  .views-exposed-form .views-exposed-widget .form-item.form-type-select.form-group .form-control.form-checkboxes input[type="checkbox"] {
    width: 18px;
    display: inline-block;
    height: 18px;
    vertical-align: middle;
  }
  

   

• 主に外部設置フィルターのラップdivの横/高さ、およびチェックボックスのサイズと表示設定を行います