如何在Bootstrap3上创建<i>标记HREF？

Question

我正在使用Bootstrap版本3.3.4并且我正在尝试创建一个搜索表单,但是,为了使我的搜索glyphicon进入我的搜索栏,我需要使用一个标签,这里是我目前的代码使用:

<form id="searchform" method="get" action="/search/" class="navbar-form navbar-right">
        <div>
          <div class="right-inner-addon>
             <a href="#" onclick="document.getElementById('searchform').submit();" ><i class=" glyphicon glyphicon-search"></i></a>
              <input id="query" name="query" type="search" class="form-control searchbox" placeholder="Search" />
        </div>
      </div>
    </form>

至于Css我除了所有引导程序之外只使用这个costum:

.searchbox {
    border-radius: 20px;
    height: 25px;
    margin-top: 5px;
}

即使单击输入搜索栏时,由于某种原因,glyphicon-search也不能用作按钮,因此用户也可以选择单击它来完成搜索.有任何想法吗 ？:S

Answer 1

你缺少结束"后<div class="right-inner-addon>,这是造成你的代码的其余部分不当渲染.像这样修复你的代码:

<form id="searchform" method="get" action="/search/" class="navbar-form navbar-right">
  <div>
    <div class="right-inner-addon">
      <a href="#" onclick="document.getElementById('searchform').submit();" ><i class=" glyphicon glyphicon-search"></i></a>
      <input id="query" name="query" type="search" class="form-control searchbox" placeholder="Search" />
    </div>
  </div>
</form>

它工作正常.

检查这个Bootply.

始终尝试使用具有语法突出显示功能的IDE(Netbeans,Visual Studio等); 这个问题会立即被抓住.

编辑

由于使用搜索栏中的图标否定了点击它的能力,我建议使用分段按钮(因为我无法找到一种方法来捕获图标上的点击事件而不是输入).这将是代码:

<form id="searchform" method="get" action="/search/" class="navbar-form navbar-right">
  <div>
    <div class="input-group">
      <input class="form-control" placeholder="Search" type="text">
      <span class="input-group-btn">
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </span>
    </div>
  </div>
</form>

另一个Bootply.