生年月日を入力させるフォームで年、月、日のテキストフォームを分けて横に並べました。
Bootstrap3だけでは記述しきれずに、下記のスタイルを追記しました。
style="width: 70px;display: inline-block;"
最終的にCSSは外部ファイル化します。
利用頻度が高そうなパターンですが、Bootstrap3だけで完結する方法は無いのかな?
<form action="" class="form-horizontal">
<div class="form-group">
<label for="name" class="control-label col-md-3">氏名</label>
<div class="col-sm-8">
<input type="text" placeholder="氏名" id="name" class="form-control">
</div>
</div>
<div class="form-group">
<label for="kana" class="control-label col-md-3">フリガナ</label>
<div class="col-sm-8">
<input type="text" placeholder="フリガナ" id="kana" class="form-control">
</div>
</div>
<div class="form-group">
<label for="birth" class="control-label col-md-3">生年月日</label>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="年" style="width: 70px;display: inline-block;"><span style="margin: 0 5px;">年</span>
<input type="text" class="form-control" placeholder="月" style="width: 50px;display: inline-block;"><span style="margin: 0 5px;">月</span>
<input type="text" class="form-control" placeholder="日" style="width: 50px;display: inline-block;"><span style="margin: 0 5px;">日</span>
</div>
</div>
<div class="form-group">
<label for="adr" class="control-label col-md-3">住所</label>
<div class="col-sm-8">
<input type="text" placeholder="住所" id="adr" class="form-control">
</div>
</div>
</form>