Bootstrap 3のclass属性「checkbox-inline」で二段目以降の先頭がさがる問題に対処しました

Bootstrap 3で.checkbox-inlineを使えば、チェックボックスを横並びにすることができますが、二段目以降の先頭が下がってしまいます。

そのままではかっこ悪いので、CSSをごにょごにょっとして、下がらないようにしました。

CSSコード

Bootstrapのファイルは修正したくないので、別にCSSファイルを用意して書きしました。

/* 上書き */
.checkbox-inline + .checkbox-inline {
	margin-left: 0px;
	margin-right: 10px;
}

/* 追加 */
.checkbox-inline:first-child {
	margin-right: 10px;
}

説明

元の.checkbox-inline + .checkbox-inlineではmargin-left: 10px;となっています。これをmargin-left: 0px; margin-right: 10px;にして、右側が空くようにしました。

ですが、それだけでは1つめの.checkbox-inlineの右側が空きません。:first-childで1つめの右側も空くようにしました。

これで二段目以降の先頭が下がらなくなりました。めでたしめでたし。

ちなみにラジオボタンを横並びにする.radio-inlineも同じように対処可能です。