レイアウト

• 12カラムの Flexbox レイアウトが採用されています。
• 合計が 12 になるようにカラムを設定します。例えば 6 カラム分の横幅にしたい場合は、.col-6 と記述します。
• 数字がないカラム(.col)横幅は均等になります。
• カラムに余白を入れたくない場合は .no-gutters を追加します。
• カラムの中に入れ子を作ることは可能で、その場合は 12 当分してカラムを換算してください。

基本レイアウト

• プライマリナビゲーション .mt-primaryNavigation : サイトに関わる操作と遷移。（PC表示のみ）
• メインコンテンツ .mt-mainContent : MTユーザーが情報入力したり操作をするエリア。
• セカンダリパネル .mt-secondaryPanel : コンテンツに付随する操作や情報を掲載（オプション）
• フッター .mt-footer : 製品情報やヘルプドキュメントへの導線。

モバイル表示時は下記のようになります。

• プライマリナビゲーションが非表示になります。
• メインコンテンツ・セカンダリパネルが横幅いっぱいに広がります。
• フッターがモバイル用になります。（ナビゲーションを参照）

<div class="container-fluid">
  <div class="row">
    <div class="mt-primaryNavigation">
      プライマリナビゲーション
    </div>
    <div class="mt-mainContent">
      メインコンテンツ
    </div>
    <div class="mt-secondaryPanel">
      セカンダリパネル
    </div>
  </div>
  <div class="row align-items-end">
    <div class="mt-footer">
      フッター
    </div>
  </div>
</div>

ダッシュボード

基本レイアウトと同じ構成になります。モバイル表示時は下記のようになります。

• プライマリナビゲーションが非表示になります。
• メインコンテンツが横幅いっぱいになります。
• セカンダリパネルが非表示になります。
• フッターがモバイル用になります。（ナビゲーションを参照）

シングルカラムレイアウト

コンテンツ量が少ないシングルカラムレイアウトが必要な際、以下のようなマークアップを記述すると、フッターがウィンドウの下部に配置されます。

• コンテナを .container-single-column に切り替えます。
• コンテンツの量が少ない行に .row .flex-items-1 と記述します。

デモレイアウト

<div class="container-single-column">
  <div class="row flex-items-1">
    <div class="mt-mainContent">
      メインコンテンツ
    </div>
  </div>
  <div class="row">
    <div class="mt-footer">
      フッター
    </div>
  </div>
</div>

スクロール可能メインコンテンツ

ある特定の条件下で、ウィンドウの高さに合わせてメインコンテンツのみをスクロールさせたい場合があります。通常 .mt-mainContent ですが、この場合は .mt-mainContent--scrollable になります。

<div class="mt-mainContent--scrollable">
  ...
</div>

スクロール可能セカンダリパネル

コンテンツフィールドの追加 UI のように、たくさんのアイテムがあってスクロールが必要な際に利用します。通常 .mt-secondaryPanel ですが、この場合は .mt-secondaryPanel--scrollable になります。

ウィンドウの高さでスクロールするか判定するので、もし固定させたい場合は inline で高さを設定してください。

<div class="mt-secondaryPanel--scrollable">
  ...
</div>