css - フォームをブートストラップの中央に配置しますか?

Question

ブートストラップ 3 を使用しています。

フォームを水平方向に中央揃えにする最良の方法は何ですか?

<div class="container">
  <div class="row">
    <form class="form-horizontal" role="form">
        //form stuff here
    </form>
  </div>
</div>

Answer 1

必要に応じて、フォームにいくつかのスタイルを追加できます。

form {
    margin-left:auto;
    margin-right:auto;
    width:200px;
}

デモ

Answer 2

フォームを中央に配置する必要がある場合は、次の 2 つのオプションがあります。

1. 必要な値を (col-) 内で使用できます (例: col-sm-6)。

2. (col-sm-12) 内で使用できます

いずれにしても、次の css コードを使用する必要があります。

.form-control {
  display: block;
  max-width: 550px;
  height: 45px;
  margin: 5px auto;
  padding: 10px 20px;
  vertical-align: middle;
  border: 1px solid #ECECEC;
  border-radius: 4px;
 }

重要なのは、常にmax-widthと値を使用することです。これにより、フォーム フィールドが大きいサイズではこの値のままになり、小さいサイズでは縮小されます。

アップデート：

上記の CSS コードを使用し、このコードをフォームで使用します。

<form class="form-horizontal" role="form">
<legend class="righter">Legend</legend>
<div class="form-group">
    <label for="title" class="col-lg control-label">Title</label>
    <div class="col-lg">
        <input type="text" class="form-control" id="title" placeholder="..." />
    </div>
</div>
<div class="form-group">
    <label for="id" class="col-lg control-label">UUID</label>
    <div class="col-lg">
        <input type="text" class="form-control" id="description" placeholder="..."/>
    </div>
</div>

上記の例のようにclass="col-lg"を使用することが重要です。

これがお役に立てば幸いです。または、フォームのライブ コードをアップロードしてください。