laravel Twitter Bootstrap 3 输入和图标不显示内联

Twitter Bootstrap 3 Input and icon do not display inline

提问by John

My problem is that I cannot display my glyphicon before my inputs.

我的问题是我无法在输入之前显示我的字形。

Here is my code:

这是我的代码：

<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 --}}

Where rows such as {{ Form::text('username', null, ['required'=>'1','placeholder'=>'Username','id'=>'user','class'=>'form-control']) }} are Laravel 4 commands which generate input type="text" name="text" class="form-control pleceholder= ...

其中行如 {{ Form::text('username', null, ['required'=>'1','placeholder'=>'Username','id'=>'user','class'=> 'form-control']) }} 是 Laravel 4 命令，它们生成 input type="text" name="text" class="form-control pleceholder= ...

Please answer only for bootstrap 3..

请仅针对引导程序 3 回答..

回答by zessx

You could use .form-horizontal, and put your glyphicon in an other column than the field :

您可以使用.form-horizontal, 并将您的字形放在字段之外的其他列中：

<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>

Play with col-sm-xand col-sm-offset-xto get the width you need.

玩col-sm-x和col-sm-offset-x以获得您需要的宽度。

Bootply

引导