インライン・フォーム Inline form
form要素のclass属性にform-inlineを指定することで、フォーム部品をインライン表示させることができる。
label要素のclass属性にsr-onlyを指定することで、ラベルを非表示にできる。
サンプル
ソースコード
<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="InputEmail">メール・アドレス</label> <input type="email" class="form-control" id="InputEmail" placeholder="メール・アドレス"> </div> <div class="form-group"> <label class="sr-only" for="InputPassword">パスワード</label> <input type="password" class="form-control" id="InputPassword" placeholder="パスワード"> </div> <div class="form-group"> <label class="sr-only" for="InputSelect">選択</label> <select class="form-control" id="InputSelect"> <option>選択肢１</option> <option>選択肢２</option> <option>選択肢３</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox" value="checkboxA"> Ａ </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="checkboxB"> Ｂ </label> </div> <button type="submit" class="btn btn-default">送信</button> </form>