More than 5 years have passed since last update.

bootstrapでサイドバーの設定

Bootstrap

Last updated at 2020-01-31Posted at 2020-01-28

bootstrapのグリッドを使用してサイドバーの設置をしようとした時にはまったため、共有します。
(コードは読みやすさ重視にしているため簡単に書いています。)

やりたいこと

左側のサイドバーは固定し、右側のサイドバーはページによってつける。

はまったところ

・<div class="col-sm-2">と左側のサイドバーの範囲指定。・・・①
・<div class="col-sm-10">の中でそれ以外の内容を表示。・・・②
・index.html.erbの<div class="col-sm-8">でメインの表示。・・・③
・<div class="col-sm-2">と右側のサイドバー・・・④

このままでは①②③は思うようにできるのですが、
④の右側のサイドバーにしたいところが③の下に表示されてしまいます。

application.html.erb

<!DOCTYPE html>
<html lang="ja">
  <head>
    #(省略)
  </head>

  <body>
    <div class="row">
      <div class="col-sm-2">
        ①左側のサイドバー
      </div>
      <div class="col-sm-10">
        ②<%= yield %>
      </div>
    </div>
  </div>
    #(省略)
  </body>
</html>

index.html.erb

<div class="col-sm-8">
  ③メインのコード
</div>

<div class="col-sm-2">
  ④右側のサイドバー
</div>

解決方法

グリッドの中でさらにグリッドを使って横並びにしたい時には<div class="row">と
例全体を囲むと、③と④を横並びに配置することができます。

index.html.erb

<div class="row"> #追加部分
  <div class="col-sm-8">
    ③メインのコード
  </div>

  <div class="col-sm-2">
    ④右側のサイドバー
  </div>
</div>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up