グリッドレイアウトで作成するフォームについて

BootStrapを使用し、フォームの画面を作成しているのですが、うまくいきません。
以下はsignUp.htmlになります。


<!DOCTYPE html>
<html>
<head>
  <title>Spring Boot de Bootstrap</title>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" media="all" href="/css/signUp.css"/>
  <link rel="stylesheet" media="all" href="/webjars/bootstrap/4.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-5 col-sm-8 top_element">
      <div class="bg-primary">
        <p class="text-white text-center">SIGN UP</p>
      </div>
      <div class="form_content">
        <form>
          <input type="text" name="name" placeholder="Name">
          <input type="text" name="email" placeholder="Email">
          <input type="text" name="password" placeholder="Password">
          <input type="text" name="confirm_password" placeholder="ConfirmPassword">
        </form>
      </div>

    </div>

  </div>
</div>
<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

ブラウザでの表示結果は、以下になります。

ここで疑問なのですが、formのinput要素が何故横並びになってしまうのかが分かりません。
<div class="col-md-5 col-sm-8 top_element">ここで、列を指定していますが、form要素はこの中に内包されている形である為、横並びになってしまう原因が分かりません。
formのinput要素を一つずつ縦に並べる方法がありましたら、教えて頂けましたら幸いです。

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

回答1件

ベストアンサー

ここで疑問なのですが、formのinput要素が何故横並びになってしまうのかが分かりません。

input要素が横並びになるのはcol-md-5やcol-sm-8とは関係がありません。
<input>タグには、標準でdisplay: inline;が指定されており、CSSを何も指定しなければ
横並びになります。(<span>や<a>などと同様)

formのinput要素を一つずつ縦に並べる方法がありましたら、教えて頂けましたら幸いです。

Bootstrap関係なく、通常のCSSだと以下のような形です。

CSS
1input[type="text"] {
2  display: block;
3}

Bootstrapの書き方は、以下のような形です。

HTML
1<form>
2  <div class="form-group">
3    <input class="form-control" type="text" name="name" placeholder="Name">
4  </div>
5  <div class="form-group">
6    <input class="form-control" type="text" name="email" placeholder="Email">
7  </div>
8  <div class="form-group">
9    <input class="form-control" type="text" name="password" placeholder="Password">
10  </div>
11  <div class="form-group">
12    <input class="form-control" type="text" name="confirm_password" placeholder="ConfirmPassword">
13  </div>
14</form>