ブートストラップでフォームコントロールの中央に配置する方法

Question

何が欠けていますか？
私はコンテナの境界を見ることができ、それは正しく動作する領域を示しています。 しかし、私は行（div）とオフセット（div）を追加するとき、それはそれを正当化するままです。

<div id="page" class="container" style="border:solid"> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3"> 
      <div class="form-group"> 
       <label for="firstName">First Name:</label> 
       <input type="text" id="firstName" class="form-control" /> 
      </div> 
      <div class="form-group"> 
       <label for="lastName">Last Name:</label> 
       <input type="text" id="lastName" class="form-control" /> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

私はあなたが何を意味していると思いますが、わかりません。このような意味ですか？

もしそうなら、そのためのクラスがある：

class="text-center" 

ですから、このようにコードを変更することができます。

<div id="page" class="container" style="border:solid"> 
<div class="row"> 
    <div class="col-md-6 col-md-offset-3 text-center"> 
     <div class="form-group"> 
      <label for="firstName">First Name:</label> 
      <input id="firstName" class="form-control text-center" type="text"> 
     </div> 
     <div class="form-group"> 
      <label for="lastName">Last Name:</label> 
      <input id="lastName" class="form-control text-center" type="text"> 
     </div> 
    </div> 
</div> 

それともあなたはそれを追加することができますたとえば、入力フォームのコントロールなど、必要なコントロールだけを表示できます。

希望に役立ちます！

Answer 2

ブートストラップは優れたモバイルエクスペリエンスを提供しますが、デスクトップでもスキャフォールディング機能の恩恵を受けることができます。ですから、フォームを開発するときには、可能な限り最小限のスペースを使いたいと思っています。そのことを念頭に置いて、私はDemonic Penguinのコードとあなたのコードを改良しました。これと同じように：この実装では

<div id="page" class="container" style="border:solid"> 
    <div class="row" style="padding-top: 12px;"></div> 
    <div class="row"> 
    <div class="col-md-6 col-md-offset-3 text-center"> 
     <div class="form-group"> 
     <div class="input-group"> 
      <span class="input-group-addon" id="firstName-addon"><i class="fa fa-user"></i></span> 
      <input id="firstName" class="form-control text-center" placeholder="First Name" type="text"> 
     </div> 
     </div> 
     <div class="form-group"> 
     <div class="input-group"> 
      <span class="input-group-addon" id="lastName-addon"><i class="fa fa-user"></i></span> 
      <input id="lastName" class="form-control text-center" placeholder="Last Name" type="text"> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

、あなたがあなたのページ（sまでFontAwesome CSSの参照リンクを追加する必要があります。

<div id="page" class="container" style="border:solid"> 
    <div class="row" style="padding-top: 12px;"></div> 
    <div class="row"> 
    <div class="col-md-6 col-md-offset-3 text-center"> 
     <div class="form-group"> 
     <input id="firstName" class="form-control text-center" placeholder="First Name" type="text"> 
     </div> 
     <div class="form-group"> 
     <input id="lastName" class="form-control text-center" placeholder="Last Name" type="text"> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 3

またそうのように、フィールドにアイコンを追加することで、フォームを飾ることができます）ここから得ることができます：https://www.bootstrapcdn.com/fontawesome/