bootstrap3で横並びのボックスを実現する方法

  • 52
    Like
  • 0
    Comment
More than 1 year has passed since last update.

bootstrap3にて、横並びのボックスを実現する方法です。

checkboxの場合

labelにcheckbox-inlineを付けます。

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-xs-3">チェックリスト</label>
        <div class="col-xs-9">
            <label class="checkbox-inline">
                <input type="checkbox" name="">オプション1
            </label>
       <label class="checkbox-inline">
                <input type="checkbox" name="">オプション2
            </label>
        </div>
    </div>
</form>

radioボタンの場合

labelにradio-inlineクラスを付けます。

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-xs-3">チェックリスト</label>
        <div class="col-xs-9">
            <label class="radio-inline">
                <input type="radio" name="examplecheck">オプション1
            </label>
       <label class="radio-inline">
                <input type="radio" name="examplecheck">オプション2
            </label>
        </div>
    </div>
</form>

その他で実現したい場合(例:年月日)

その他で実現したい場合はform-inlineを使います。(もしかしたら他にやり方があるかも)

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-xs-3">年月日</label>
        <div class="col-xs-9 form-inline">
            <input type="text" class="form-control" name="year" size="4"><label></label>
            <input type="text" class="form-control" name="month" size="2"><label></label>
            <input type="text" class="form-control" name="day" size="2"><label></label>
        </div>
    </div>
</form>

なお、checkboxとradioボタンに関しては基本的に内容は後に付けなければいけません。どうしても前に付けたい場合にはその他の実現で出来るかと思います。