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を減らすことです。
コメント