以表单形式定位和对齐twitter bootstrap字段

问题描述：

我有一个表单，我希望字段在页面中间居中。目前形式几乎集中，但这些领域没有。以表单形式定位和对齐twitter bootstrap字段

这是一张照片。你可以看到单词“开始”是居中，但表单不是。

表单字段需要居中。像tumblr布局一样。

在我看来，这是我的标记。

<h1 class="center">Start</h1> 
     <form class="create_account" id="login" action="{{ URL::route('account-create-post') }}" method="post"> 
     <div class="input-group input-group-lg"> 
      <div class="form-group"> 


       <br> 
       <input class="form-control input-lg" type='text' name='first_name' required placeholder="First Name"{{ (Input::old('first_name')) ? ' value"' . e(Input::old('first_name')) . '"' : '' }}> 
         <div class="errors"> 

       </div> 
      </div> 
      <div class="form-group"> 

       <br> 
       <input class="form-control input-lg" type='text' name='last_name' required placeholder="Last Name" {{ (Input::old('last_name')) ? ' value"' . e(Input::old('last_name')) . '"' : '' }}> 
         <div class="errors"> 

       </div> 
      </div> 
      <div class="form-group"> 

       <br> 
       <input class="form-control input-lg" type='email' name='email' required placeholder="Email" {{ (Input::old('email')) ? ' value"' . e(Input::old('email')) . '"' : '' }}> 
         <div class="errors"> 

       </div> 
      </div> 
      <div class="form-group"> 

       <br> 
       <input class="form-control input-lg" type='text' name='username' required placeholder="Username" {{ (Input::old('username')) ? ' value"' . e(Input::old('username')) . '"' : '' }}> 
         <div class="errors"> 


       </div> 
      </div> 

      <div class="form-group"> 

       <br> 
       <input class="form-control input-lg" type='password' name='password' required placeholder="Password" /> 
       <div class="errors"> 

       </div> 
      </div> 
      <div class="form-group"> 

       <br> 
       <input class="form-control input-lg" type='password' name='password_again' required placeholder="Confirm Password" /> 
       <div class="errors"> 

       </div> 
      </div> 

      <input class="btn btn-primary btn-block" type="submit" value="Start Apologizing"> 
      <!-- pass token related to session-protects against csrf --> 
      {{ Form::token() }} 
     </form>

这里是我的CSS

.create_account { 
width: 400px; 
height: auto; 
margin: 0 auto; 
text-align: center; 
} 

.create_account input { 
width: 80%; 
height: auto; 
margin: 0 auto; 
}

答

试试这个：

.input-group {width:80%; margin:0 auto;} 
.create_account input {width:100%}

jsfiddle

它具有input扩大父的整个宽度，在这种情况下，.input-group这是设定为我假设你想要的80％。

以表单形式定位和对齐twitter bootstrap字段

相关推荐