Twitter Bootstrapでinputの幅を変える方法

Twitter Bootstrapにて、フォームのinputの幅がどうもしっくりこない。

	class="input-mini"
	class="input-small"
	class="input-medium"
	class="input-large"
	class="input-xlarge"
	class="input-xxlarge"

これらがデフォルトのクラスとして用意されているが、最小のminiでもけっこう幅が広い。class=”input　span1″とする方法もあり、これだとminiよりも幅が狭くなるが、なぜかhelp-inlineが一列でインライン表示できずブロック表示になってしまう。

そこで、cssをいじることにした。bootstrap.cssを開いて「mini」で検索をかけて該当行を探す。input-miniのクラスがあると思うので、その上に

.input-xmini {
width: 30px;
}

を追加する。widthの数字はお好みでどうぞ。

もちろんデフォルトのbootstrap.cssはいじらずに、追加で custom.css などを作ってそちらに今回の内容を入れたほうがより安全でbootstrap自体のアップデートにも強いのでそこはお好みで。