试图让 glyphicon 触摸输入栏

【问题标题】：Trying to get glyphicon touching the input bar试图让 glyphicon 触摸输入栏
【发布时间】：2015-07-16 12:03:50
【问题描述】：

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

问题是按钮和输入字段之间存在很大的间隙，并且当您缩小屏幕时会堆叠。

代码如下：

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

【问题讨论】：

标签： twitter-bootstrap flask jinja2

【解决方案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>

【讨论】：