Bootstrap　入力フォームの横並びを2段で表示したい

HTML
1<form class="form-inline">
2  <div class="form-group">
3    <label for="exampleInputName2">名前</label>
4    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
5  </div>
6  <div class="form-group">
7    <label for="exampleInputEmail2">メール</label>
8    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
9  </div>
10  <button type="submit" class="btn btn-primary">Send invitation</button>
11</form>

Bootstrap4で入力フォームを横並びで複数段表示したいのですが、formで制御は可能なのでしょうか？

実現したいレイアウトのイメージ

列1	列2	列3	列4
名前	テキストボックス	メール	テキストボックス
年齢	テキストボックス	住所	テキストボックス

beginner_t

2019/06/26 10:09

まず実現したいレイアウトイメージのHTMLをかくことはできますか？可能であれば、コードの修正をお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

一例

HTML
1  <div class="form-row">
2   <div class="col-md-6 form-row form-group form-inline">
3    <label class="col-sm-3" for="name">名前</label>
4    <input class="col-sm-9 form-control" id="name" />
5   </div>
6   <div class="col-md-6 form-row form-group form-inline">
7    <label class="col-sm-3" for="mail">メール</label>
8    <input class="col-sm-9 form-control" id="mail" type="email" />
9   </div>
10   <div class="col-md-6 form-row form-group form-inline">
11    <label class="col-sm-3" for="age">年齢</label>
12    <input class="col-sm-9 form-control" id="age" />
13   </div>
14   <div class="col-md-6 form-row form-group form-inline">
15    <label class="col-sm-3" for="address">住所</label>
16    <input class="col-sm-9 form-control" id="address" />
17   </div>
18  </div>

https://getbootstrap.com/docs/4.3/components/forms/#form-row

投稿2019/06/27 02:46

x_x

総合スコア13749

msd

2019/06/27 11:14

”form-row”というクラスがあるんですね！なるほどです。ありがとうございました。

行動規範の内容に同意します

html
1<div class="form-group row">
2    <div class="col-sm-6">
3        <label>名前</label>
4        <input name="name" class="form-control" required="" type="text">
5    </div>
6    <div class="col-sm-6">
7        <label>メール</label>
8        <input name="email" class="form-control" required="" type="text">
9    </div>
10</div>
11<div class="form-group row">
12    <div class="col-sm-6">
13        <label>年齢</label>
14        <input name="age" class="form-control" required="" type="text">
15    </div>
16    <div class="col-sm-6">
17        <label>住所</label>
18        <input name="address" class="form-control" required="" type="text">
19    </div>
20</div>