No.192

入力フォームが横いっぱいになるのは嫌だ！

　開発者には便利な便利なBootstrap。便利ではあるけど滅茶苦茶クセがあるのが難点でもある。

　特にフォームのデザインに関しては結構調整に苦労する。スマホファーストで作ってあるせいで、フォームの要素がとにかくデカイのだ。

　まあ、スタイルを調整すればなんとでもなるんだけど、それではフレームワークを使ってる醍醐味がないので、公式の方法で調整するやり方をメモしておく。

フォームの縦幅

　太めと細めが用意されている。

・太め

<input class="form-control input-lg" type="text" placeholder="太めのフォーム">

・細め

<input class="form-control input-sm" type="text" placeholder="細めのフォーム">

　正直あんまり変わらないけど、指定しないよりはマシなレベル。
　tableも同じ印象だけど、日本語圏と英語圏で印象違うのかなぁ。

フォームの横幅

　div要素でグリッド指定することで横幅を調整できる。
　んー。しかしこれって調整…になるのかなぁ。まあいいけど。

<div class="row">
  <div class="col-xs-1">
    <input type="text" class="form-control" placeholder="親要素の横幅の1/12のフォーム">
  </div>
</div>