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触摸输入栏

1 个答案: