Zenn
💻

[Bootstrap] container-fluidの中にcontainerを配置する

2020/05/18に公開
Bootstrap
tech

なぜそんなことをしたいのか

  • twigを使っていて、ベーステンプレート側に container-fluid が書かれている
  • 子テンプレート側にパンくずリストとフォームがあって、パンくずリストは container-fluid サイズで表示したいけど、フォームは container サイズで表示したい
    • なぜなら、Bootstrapのグリッドシステムで最大のグリッドポイント（ xl ）が 1200px と小さいので、iMac Retinaのように馬鹿でかい画面サイズまで考慮するとなるとグリッドではいい感じにレイアウトできないので

みたいな状況があって、 container-fluid の中で container を使っていい感じに表示したくなったので、そのマークアップの方法をメモ代わりに書いておこうという記事です😅

具体例

例えばこんなコードを考えます。

{# base.html.twig #}
<body>
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <strong class="navbar-brand">Site name</strong>
    </div>
  </nav>

  <div class="container-fluid">
    {% block content %}
    {% endblock %}
  </div>
</body>

{# page.html.twig #}

{% extends 'base.html.twig' %}

{% block subtitle %}Edit some data{% endblock %}

{% block content %}
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="">Home</a></li>
      <li class="breadcrumb-item"><a href="">Some data</a></li>
      <li class="breadcrumb-item active">Edit</li>
    </ol>
  </nav>

  <div class="form-group row">
    <label class="col-form-label col-sm-3">Name</label>
    <div class="col-sm-9">
      <input type="text" name="name" class="form-control" value="Alice">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-form-label col-sm-3">Email</label>
    <div class="col-sm-9">
      <input type="email" name="email" class="form-control" value="alice@example.com">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-9 offset-sm-3">
      <button type="submit" class="btn btn-primary">Save</button>
    </div>
  </div>
{% endblock %}

これだと、iMac Retina（ 2880 x 1620 ）の画面で見ると、

こんな感じで、フォームが「さすがに横に長すぎやろ…」というサイズ感になってしまいます。

これを、

こんなふうに、どんな画面サイズでもいい感じに表示されるようにしたかったということです。

結論

結論としてはめちゃくちゃ簡単で、フォーム部分を以下のような div で囲うだけです。

+ <div class="container-lg ml-0 px-0">
    <div class="form-group row">
      <label class="col-form-label col-sm-3">Name</label>
      <div class="col-sm-9">
        <input type="text" name="name" class="form-control" value="Alice">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-form-label col-sm-3">Email</label>
      <div class="col-sm-9">
        <input type="email" name="email" class="form-control" value="alice@example.com">
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-9 offset-sm-3">
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
    </div>
+ </div>
  • lg 以上の画面サイズに対して container を適用し、
  • container のデフォルトの挙動である画面中央寄せではなく左寄せにするために ml-0 をセットし、
  • container-fluid の中で container を使ってしまっているせいで左右に余計なパディングが取られてしまうので、 px-0 でそれを消す

としているだけです。

まとめ

  • Bootstrapで container-fluid の中に container を配置したくなったらこの記事を思い出してください😇
GitHubで編集を提案

Discussion