Twitter BootstrapでHorizontal Formの左側余白を調整する

Twitter Bootstrapを最近知りまして、それを使っていろいろ実験しております。

まず一つ思ったのが、公式サイトの説明が不十分なこと。全てのクラスについての説明が網羅されていない。全てのクラス名とかが一覧になったチートシートのようなものがあればいいのに・・・。

それと、これはフレームワークなので仕方がないことですが、ちょっと「微調整」しようと思うと途端に面倒くさくなる。

たとえばHorizontal Formなんてのがあって見た目カッコいいんですが、なんかこれ、左側に妙に大きな余白がある。

これを直すには、bootstrap.cssを開き、「horizontal」で検索すると以下の部分が見つかる。

.form-horizontal .control-label {
float: left;
width: 140px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 160px;
*margin-left: 0;
}
.form-horizontal .controls:first-child {
*padding-left: 160px;
}

これを以下のように修正する。

.form-horizontal .control-label {
float: left;
width: 100px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 120px;
*margin-left: 0;
}
.form-horizontal .controls:first-child {
*padding-left: 120px;
}

すると、左側の余白が減って、まあまあいい感じになる。数値はお好みで変えてください。コツは、「.control-label」のwidthを減らしたら、同じピクセル分だけ「.controls」のmargin-leftを減らすことです。