css - Rails の radio_button_tag と label_tag を Twitter ブートストラップ 2 と水平方向に揃えますか?

Question

radio_button_tag を label_tag と水平方向に揃えることができないようです。(HAML を使用)

=radio_button_tag(:animal, "dog")
=label_tag(:animal, "Dog")

これら 2 つのフォーム ヘルパーに次のように並べて配置するには、どのクラスを割り当てますか。

O Dog

Answer 1

囲んでいる form タグを使用.form-inlineすると、通常、私が遭遇した垂直方向の配置の問題が修正されますが、すべての場合に適切であるとは限りません。

アップデート

Bootstrap には、次のテキストを使用して、それぞれチェックボックスとラジオ ボタンを並べるために、囲んでいるブロックに適用できるいくつかのクラスもあります。ドキュメントから：

<label class="checkbox">
  <input type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

ラベルである必要はありません。どのブロック要素でも機能するはずです。

ここを参照してください: http://twitter.github.com/bootstrap/base-css.html#forms (セクション「チェックボックスとラジオ」)。

Answer 2

私にとって、要素をインラインで表示するさまざまな方法は問題を解決しませんでした。問題はディスプレイではなく、ラジオ ボタンのコンテンツの高さ (何らかの理由で 46px) であることに気付きました。

したがって、ラジオボタンの高さを「自動」に設定すると、問題が解決しました。

input[type='radio'] {
  height: auto;
 }