ブートストラップでドロップダウンリストを２列に並べて表示したい

タイトルの通りです。コード貼ります。よろしくお願いいたします。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrapの練習</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery-3.5.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <h1></h1> <button type="button" class="btn btn-default">概要</button> <button type="button" class="btn btn-default">準備</button> <button type="button" class="btn btn-default">安全</button> <button type="button" class="btn btn-default">マネープラン</button> <div class="text-right pr-5"> <button type="submit" class="btn btn-danger">はじめる</button> </div> <img class="rounded float-left" src="airbnb.png"/> <div class="border col-5"> <br> <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ</h1>

<h2>宿泊施設の内容を記入</h2>
<br>
<div class="row">
  <div class="col-md">
    <form>
      <div class="form-group">
        <input type="text" class="form-control">
        <select class="form-control">
          <option>まるまる貸切</option>
          <option>個室</option>
          <option>シェアルーム</option>
        </select>
        <select class="form-control">
            <option>ゲスト1人</option>
            <option>ゲスト2人</option>
            <option>ゲスト3人</option>
            <option>ゲスト4人</option>
            <option>ゲスト5人</option>
            <option>ゲスト6人</option>
            <option>ゲスト7人</option>
            <option>ゲスト8人</option>
            <option>ゲスト9人</option>
            <option>ゲスト10人</option>
            <option>ゲスト11人</option>
            <option>ゲスト12人</option>
            <option>ゲスト13人</option>
            <option>ゲスト14人</option>
            <option>ゲスト15人</option>
            <option>ゲスト16人</option>
        </select>    
      </div>
    </form>
  </div>
</div>

</div> </body> </html>

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

回答1件

ベストアンサー

d-flex, w-50 クラス (もしくはグリッドシステム用のクラス) を用いることで質問者さんの実現したいことが行えます (動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="utf-8">
6    <title>Bootstrapの練習</title>
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <link rel="stylesheet" href="css/bootstrap.css">
9    <script type="text/javascript" src="js/jquery-3.5.0.min.js"></script>
10    <script type="text/javascript" src="js/bootstrap.js"></script>
11  </head>
12
13  <body>
14    <h1></h1>
15    <button type="button" class="btn btn-default">概要</button>
16    <button type="button" class="btn btn-default">準備</button>
17    <button type="button" class="btn btn-default">安全</button>
18    <button type="button" class="btn btn-default">マネープラン</button>
19    <div class="text-right pr-5">
20      <button type="submit" class="btn btn-danger">はじめる</button>
21    </div>
22    <img class="rounded float-left" src="airbnb.png" />
23
24    <div class="border col-5">
25      <br>
26      <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ</h1>
27
28      <h2>宿泊施設の内容を記入</h2>
29      <br>
30      <div class="row">
31        <div class="col-md">
32          <form>
33            <div class="form-group">
34              <input type="text" class="form-control">
35              <div class="d-flex">
36                <select class="form-control w-50">
37                  <option>まるまる貸切</option>
38                  <option>個室</option>
39                  <option>シェアルーム</option>
40                </select>
41                <select class="form-control w-50">
42                  <option>ゲスト1人</option>
43                  <option>ゲスト2人</option>
44                  <option>ゲスト3人</option>
45                  <option>ゲスト4人</option>
46                  <option>ゲスト5人</option>
47                  <option>ゲスト6人</option>
48                  <option>ゲスト7人</option>
49                  <option>ゲスト8人</option>
50                  <option>ゲスト9人</option>
51                  <option>ゲスト10人</option>
52                  <option>ゲスト11人</option>
53                  <option>ゲスト12人</option>
54                  <option>ゲスト13人</option>
55                  <option>ゲスト14人</option>
56                  <option>ゲスト15人</option>
57                  <option>ゲスト16人</option>
58                </select>
59              </div>
60            </div>
61          </form>
62        </div>
63      </div>
64    </div>
65  </body>
66
67</html>