试图让 glyphicon 接触输入栏

Question

我正在尝试让搜索图标出现在输入表单上，这样当我缩小时它可以在同一行上。

问题是按钮和输入字段之间有一个很大的间隙，当您缩小屏幕时，这个间隙会堆叠起来。

代码如下：

<form class="navbar-left" role="search" method=post action={{ url_for('search') }}>

  <div class="form-group form-inline">

    <div class="input-group input-lg">

      {{ render_field(form.search, placeholder='Buscar') }}

    </div>
              <button type="submit" class="btn btn-default" >
                <span class="glyphicon glyphicon-search"></span>
            </button>
  </div>

</form>

Answer 1

你说的是这样的吗？

button.btn-search {
  border: none;
  padding-top: 5px;
  position: fixed;
  background: none;
}
button.btn-search:hover {
  border: none;
  background: none;
  color: blue;
}
input {
  padding-left: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="navbar-left" role="search">
  <div class="form-group form-inline">
    <div class="input-group input-lg">
      <input type="text" name="name" placeholder="Enter your name" />
      <button type="submit" class="btn btn-default btn-search"> <span class="glyphicon glyphicon-search"></span>

      </button>

    </div>
  </div>
</form>

试图让 glyphicon 接触输入栏

Trying to get glyphicon touching the input bar

jinja2

flask

twitter-bootstrap