bootstrapに苦戦

画面のレイアウトが微妙に気に食わない。タイトルをもう少し左上にしたい、あちこちにある微妙なマージン（？）を消したい、などなど。言い出したらキリがない。だから画面作るの嫌いなんだけど。でも、やりだすと止まらない。まず、現状3行になっているものを（行数食うから）1行にまとめたい。で、bootstrapの出番。まずここで苦戦。思い通りのレイアウトになってくれない。優秀な部下の助けを借りて、ようやくできた。と思ったら、タイトルが少し右にずれ込んでて、本文の方が左にはみ出している。あと、タイトルがエリアの下の方にある。もっと上にしたい。これ、全部タイトルをbootstrapのcolの中に入れたからなんだよね。その前までは（3行だったけど）こんなことなかったし。で、用もないのに本文の方もcolの中に入れて、一応そろった。ちょっとだけ満足、相当不満。そもそも何でこんなことになっているのか、Firefoxのインスペクタ使って調べる。分かった。bootstrapのcss定義にmarginとかpaddingとかが定義されていて、そのせいで微妙にずれている模様。そこで、divとかの中にその名前のmarginを上書きしてあげればいい。例えば、タイトルを上にレイアウトしたいので、margin-top:0pxだったものを-20pxっていう感じ。タイトルが少し右にめり込んでいる件は、padding:20pxだったものを0pxに変更。
答を知ってしまえば簡単だけど、上にレイアウトしたいからalign-topとか左に寄せたいからleftとか何をやってもビクともしなくて、かなり遅くまで時間食った。はぁ、疲れた。でも出来て終るのはやっぱり嬉しいね。