Bootstrapでテキストフィールドとセレクトボックスとボタンを1行で表示する

harada 772views 更新:2015年12月10日

HTML

<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="検索キーワードを入力">
<select class="form-control">
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-primary">検索</button>
</span>
</div>

CSS

.input-group input {
        width: 70%;
}
.input-group input select {
        width: 30%;
}

高さなどは適宜調整してください。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません