はじめに

Railsでポートフォリオを作っているときに、レイアウトをbootstrapで整えようと思い試行錯誤したので、つまずいたポイントなど備忘録として残しておきます。

cssの読み込み順

headタグ内でcssファイルを読み込むとき、上から順に読み込まれるため、先にbootstrapを読み込んでから自分のcssを読み込む必要があります。(cssの適用は読み込み順だけではなく、点数計算によって決まるため、これのみでは適用するcssを完全に上書きすることはできないので注意)

row と col の使い方

<div class="row">
  <div class="col-md-5">
    #ここにフォームの要素を書く
  </div>
<div>

親要素にrow,子要素にcolを指定すると、グリッドレイアウトが適用されます。今回作ったフォームは1列だったが、横幅を指定する際にcol-md-5で指定するためにグリッドレイアウトの記述スタイルを用いました。これを指定せずにフォームを書くと、横幅が画面いっぱいまで広がってしまいました。

file_fieldの設定

file_fieldのみフォームのスタイルが異なるため、レイアウトで浮いてしまいます。custom-file属性で囲むことで他のレイアウトに近くすることができます。
細かい設定に関しては以下を参照しました。
https://blog1.mammb.com/entry/2019/12/11/090000

ただ、ファイル投稿のラベル表示ができませんでした。上記サイトで紹介されていたbsCustomFileInput.init();が適用されず、その手前までのみ実装しました。解決法が見つかり次第追記します、すみません・・・。

どうしてもスタイルが適用できないとき

css特有の点数計算が思いの外やっかいで、思ったように自分のcssが適用できないことがあると思います。（自分はかなりありました。）無理に適用しようとしすぎると、相当時間食うので別のスタイルを考える、cssで実装できそうな場所は自分のcssで実装する、などのほうが僕のような初心者には結局早かったかも・・・？