Объединить два входных verticaly в одной форме, используя Bootstrap 3

Question

bootstrap http://i.stack.img

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
        <form> 
 
         <div class="input-group inp"> 
 
          <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span> 
 
          <input class="form-control" type="text" placeholder="Email address"> 
 
         </div> 
 
         <div class="input-group inp"> 
 
          <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> 
 
          <input class="form-control" type="password" placeholder="Password"> 
 
         </div> 
 
        </form> 
 
       </div>

ur.com/liYfx.png

Добрый вечер. Можете ли вы помочь мне с загрузкой? Я не могу объединить два входа в одну форму и добавить значок Font Awesome с помощью Twitter Botstrap, как на этой картинке. Спасибо Большое .

Answer 1

я сделал что-то подобное в моем последнем проекте, так вот вы идете:

<div class="container"> 
    <div class="row"> 
    <form role="form"> 
     <div class="col-md-6 col-md-offset-3"> 
     <div class="form-group"> 
      <div class="input-group"> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
       <input type="text" class="form-control" placeholder="MinVal"> 
      </div> 
     <div class="input-group"> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
       <input type="text" class="form-control" placeholder="MinVal"> 
     </div> 
     </div> 
    </div> 
    </form> 
    </div> 
</div> 

Работа скрипку:

JSFiddle

обновление Fiddle:

UpdateFiddle