No.192


【Bootstrap3】入力フォームの幅を指定する

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

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

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

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


フォームの縦幅

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

クラス名 意味
input-lg 太め
input-sm 細め

・太め

<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>