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

回答編集履歴

2

修正

2020/04/23 02:06

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -1,7 +1,8 @@
1
1
  > ここで疑問なのですが、formのinput要素が何故横並びになってしまうのかが分かりません。
2
2
 
3
+ input要素が横並びになるのは`col-md-5`や`col-sm-8`とは関係がありません。
3
- input要素が横並びなるのは、標準で`display: inline;`が指定されているからで
4
+ <input>タグには、標準で`display: inline;`が指定されておりCSSを何も指定しなければ
4
- `col-md-5`や`col-sm-8`は関係がいです。
5
+ 横並びにります。(<span>や<a>などと同様)
5
6
 
6
7
  ---
7
8
 

1

Bootstrapの記述を追加

2020/04/23 02:06

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -14,5 +14,25 @@
14
14
  display: block;
15
15
  }
16
16
  ```
17
+ ---
18
+ Bootstrapの書き方は、以下のような形です。
17
19
 
20
+ ```HTML
21
+ <form>
22
+ <div class="form-group">
23
+ <input class="form-control" type="text" name="name" placeholder="Name">
24
+ </div>
25
+ <div class="form-group">
26
+ <input class="form-control" type="text" name="email" placeholder="Email">
27
+ </div>
28
+ <div class="form-group">
29
+ <input class="form-control" type="text" name="password" placeholder="Password">
30
+ </div>
31
+ <div class="form-group">
32
+ <input class="form-control" type="text" name="confirm_password" placeholder="ConfirmPassword">
33
+ </div>
34
+ </form>
35
+ ```
36
+
18
- (Bootstrapの書き方は調べて追記します。)
37
+ 参考: Forms · Bootstrap
38
+ [https://getbootstrap.com/docs/4.4/components/forms/](https://getbootstrap.com/docs/4.4/components/forms/)