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

Question

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

这是我的代码：

<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 :: text（'username'，null，['required'=＆gt;'1'，'placeholder'=＆gt;'Username'，'id'=＆gt;'user'）等行，'class'=＆gt;'form-control']）}} 是Laravel 4命令生成输入类型=“text”name =“text”class =“form-control pleceholder = ...

请仅回答bootstrap 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