読者です 読者をやめる 読者になる 読者になる

unhurried

コンピュータ関連ネタがほとんど、ときどき趣味も…

Bootstrap3 フォームレイアウト

Bootstrap3でフォームを作ろうとして結構はまってしまったので、 ポイントとサンプルコードをメモしておきます。

ポイント

  • 基本はlabel.control-labelとinput.form-controlをdiv.form-groupで囲む。
  • inputの幅は100%になるので、制限したい場合はstyleを指定する。
  • labelとinputを横並びにするには、labelとinputの親となるdivを用意し、col-xx-xを指定する。
  • 複数のinputを横並びにするには、inputの親となるdivを用意し、form-inlineを指定する。

サンプルコード

f:id:unhurried:20160215194708p:plain

   <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-xs-2">aaa</label>
            <div class="col-xs-10">
                <input type="text" placeholder="aaa" class="form-control"  style="width:200px">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2">bbb ccc</label>
            <div class="form-inline col-xs-10">
                <input type="text" placeholder="bbb" class="form-control"   style="width:200px;margin-right:10px;">
                <input type="text" placeholder="ccc" class="form-control"   style="width:200px">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <input type="submit" value="Submit" class="btn btn-primary">
            </div>
        </div>
    </form>

参考