No.75

form要素を一部だけinlineにしたい！

　レスポンシブルサイト開発に便利なBootstrapだが、スマートホンファーストのためにPCだと都合の悪いことも多い。

　個人的に一番不自由に感じているのが、フォーム内の要素が全てデフォルトでブロック要素になってしまうことだ。
　もちろんinlineに変更することは出来るのだが、今度はフォーム全てがinlineになってしまい融通が利かないこと甚だしい。
　なにせチェックボックスやラジオボタンまで縦に並んでしまうのだ。要素が1個や2個ならともかく、10個並んだりすると悲惨この上ないことになる。

解決方法

　ブロック要素の中にinline宣言したブロック要素を配置し、その中にinline要素を記載することで対応できる。
　本来は反則なのかもしれないが、個人的にはシンプルで良いと思う。

<form class="form-horizontal">
  <div class="form-group">
    <label>性別</label>
    <div class="form-inline">
      <label>男性</label><input type="radio" class="form-control" value="1"/>
      <label>女性</label><input type="radio" class="form-control" value="2"/>
    </div>
  </div>
</form>