Laravel中输入组的按钮

时间:2015-07-25 21:30:01

标签: twitter-bootstrap laravel blade

我有以下Blade模板。我正在尝试模拟按钮插件类here

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->

这是我的刀片代码。

<div class="col-lg-10 text-centered">
    <div class="input-group">
        {!! Form::open(['action' => ['SchedulizerController@results'], 'method' => 'GET']) !!}
        {!! Form::text('q', '', [
        'class' => 'form-control',
        'id' =>  'q',
        'placeholder' =>  'i.e. ECE 201, Digital Logic, Kandasamy, or 41045'
        ]) !!}
        <span class="input-group-btn">
            {!! Form::submit('Search', array('class' => 'btn btn-default')) !!}
        </span>
        {!! Form::close() !!}
    </div>
</div>

在纯HTML(来自view-source)中,代码如下所示:

<div class="col-lg-10 text-centered">
    <div class="input-group">
        <form method="GET" action="http://app.dev/schedulizer/results" accept-charset="UTF-8">
        <input class="form-control" id="q" placeholder="i.e. ECE 201, Digital Logic, Kandasamy, or 41045" name="q" type="text" value="">
        <span class="input-group-btn">
            <input class="btn btn-default" type="submit" value="Search">
        </span>
        </form>
    </div>
</div>

然而,结果如下:

enter image description here

我的代码与Bootstrap代码基本相同 - 所以给出了什么?

编辑:

有趣的是,如果我不与<div class="input-group"关闭>,那就有效了。什么了?!

1 个答案:

答案 0 :(得分:1)

this吗?

<div class="col-lg-10 text-centered">
    <form class="form-inline" method="GET" action="http://app.dev/schedulizer/results" accept-charset="UTF-8">
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" id="q" placeholder="i.e. ECE 201, Digital Logic, Kandasamy, or 41045" name="q" type="text" value="" />
                <div class="btn btn-default input-group-addon" type="submit">Search</div>
            </div>
        </div>
    </form>
</div>