Щебет Bootstrap 3 Вход и значок не отображаются в строке

Question

Моя проблема заключается в том, что я не могу отобразить свой глификон перед моими входами.

Вот мой код:

<div class="modal fade " id="login" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">  
<div class="modal-dialog"> 

<div class="modal-content"> 

    <div class="modal-header text-center"> 

    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button> 
    <h4 class="modal-title">Log in</h4> 
    </div>{{--close modal header --}} 



    <div class="modal-body text-center"> 

    {{ Form::open(array('url'=>'/' ,'role'=>'form')) }} 


    @if($errors->count()>0) 
     <div class="alert alert-danger" style="text-align:center;"> 

     <p>Errors</p> 

     <ul> 
      @foreach($errors->all() as $error) 
      <li> 
       {{$error}} 
      </li> 
      @endforeach 
     </ul> 
     </div> 
    @endif 


    @if(Session::has('flash_message')) 
     <div class="alert alert-danger" style="text-align:center;"> 
     <p>{{Session::get('flash_message')}}</p> 

     </div> 
    @endif 


    <div class="form-group"> 

     <span class="glyphicon glyphicon-user "> 
     {{ Form::text('username', null, ['required'=>'1','placeholder'=>'Username','id'=>'user','class'=>'form-control']) }} 
     </span> 

     </div> 


     <div class="form-group"> 

     <span class="glyphicon glyphicon-lock "> 

      {{ Form::password('password',  ['required'=>'1','placeholder'=>'Password','id'=>'password','class'=>'form-control']) }} 
     </span> 
     </div> 

      <br/> 

     {{'   &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     '}} 


     {{ Form::submit('login',['class'=>'btn']) }} 

     or 

     {{ Form::button('Sign up',['class'=>'btn btn-danger','data-dismiss'=>'modal','data-toggle'=>'modal','data-target'=>'#signup']) 
     }} 



     {{ Form::close() }} 



    </div>{{--close modal body --}} 





    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

    </div> 

</div><!-- /.modal-content --> 

    </div><!-- /.modal-dialog --> 


</div> {{--close modal --}} 

Где строки, такие как {{Form :: текст ('имя пользователя', NULL, [ 'требуется' => '1', 'заполнителем '=>' Username ',' id '=>' user ',' class '=>' form-control '])}} - это команды Laravel 4, которые генерируют тип ввода = "text" name = "text" class = "form-control pleceholder = ...

Пожалуйста, ответьте только на загрузку 3 ..

Answer 1

Вы можете использовать .form-horizontal, и поставить glyphicon в другой колонке, чем поле:

<form class="form-horizontal" role="form"> 

    <div class="form-group"> 
     <label class="col-sm-1 col-sm-offset-3 control-label"><span class="glyphicon glyphicon-user"></span></label> 
     <div class="col-sm-5"> 
      <input type="text" placeholder="Username" class="form-control"/> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-sm-1 col-sm-offset-3 control-label"><span class="glyphicon glyphicon-lock"></span></label> 
     <div class="col-sm-5"> 
      <input type="password" placeholder="Username" class="form-control"/> 
     </div> 
    </div> 

    <br/> 
    <input type="submit" class="btn btn-default" value="Login"/> 
    &nbsp;or&nbsp; 
    <input type="submit" class="btn btn-danger" value="Sign up"/> 

</form> 

Играть с col-sm-x и col-sm-offset-x, чтобы получить ширину вам нужно.

Bootply