teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コードの追加

2020/05/10 09:14

投稿

okina
okina

スコア471

answer CHANGED
@@ -1,1 +1,57 @@
1
+ ```css
2
+ .col-12{
3
+ padding:0;
4
+ }
5
+
6
+ .row{
7
+ margin: 0;
8
+ }
9
+ ```
10
+
11
+ ```html
12
+ <div class="container mx-auto">
13
+ <div class="row">
14
+ <div class="col-md-12 p-0">
15
+ <!-- <p>東京</p> -->
16
+ <input type="text" class="form-control mb-2" placeholder="ロケーション" value="東京">
17
+ </div>
1
- formにpaddingを設定するか、buttonからpaddingを削除したらどうでしょう
18
+ <div class="col-md-7 p-0">
19
+ <!-- <p>まるまる貸切</p> -->
20
+ <select class="custom-select custom-select mb-2">
21
+ <option selected>まるまる貸切</option>
22
+ <option value="1">個室</option>
23
+ <option value="2">シェアルーム</option>
24
+ </select>
25
+ </div>
26
+ <div class="col-md-5 p-0">
27
+ <!-- <p>ゲスト4人</p> -->
28
+ <select class="custom-select custom-select mb-2">
29
+ <option value="1">ゲスト1人</option>
30
+ <option value="2">ゲスト2人</option>
31
+ <option value="3">ゲスト3人</option>
32
+ <option selected>ゲスト4人</option>
33
+ <option value="5">ゲスト5人</option>
34
+ <option value="6">ゲスト6人</option>
35
+ <option value="7">ゲスト7人</option>
36
+ <option value="8">ゲスト8人</option>
37
+ <option value="9">ゲスト9人</option>
38
+ <option value="10">ゲスト10人</option>
39
+ <option value="11">ゲスト11人</option>
40
+ <option value="12">ゲスト12人</option>
41
+ <option value="13">ゲスト13人</option>
42
+ <option value="14">ゲスト14人</option>
43
+ <option value="15">ゲスト15人</option>
44
+ <option value="16">ゲスト16人</option>
45
+ </select>
46
+ </div>
47
+ </div>
48
+ <div class="col-12">
49
+ <a href="" class="btn btn-danger btn-block btn-lg mt-3">はじめる</a>
50
+ </div>
51
+
52
+ </div>
53
+
54
+ ```
55
+
56
+ 現状のコードをできるだけ維持しました。別途classを付与されることをお勧めします。
57
+ divの数がこの部分だけだと明らかにおかしいですが大丈夫ですか?この部分だけで正しくなるように修正しています。ボタンもcontainerの中に入れました。