Question

我正在使用Bootstrap版本3.3.4而且我正在尝试制作搜索表单，但是，为了让我的搜索字形图进入我的搜索栏，我需要使用标签，这里是我目前正在使用的代码：

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

Answer 2

我的标准猜测是基于一个假设，因为我没有代码的工作版本。

锚标签通常没有自己设置的特定高度或宽度。您的锚标签在您的图标确实没有宽度或高度的情况下很可能。

右键单击图标并选择inspect元素，打开浏览器的开发工具。你应该可以从那里拍摄它。

Answer 3

我的猜测。如果那不起作用将是z索引。我手机上没有萤火虫，但是如果你将鼠标悬停在手机上，它是否只会突出显示搜索栏？或者你可以突出显示图标吗？如果你不能在你的CSS中更改表单的Z-index，那么就说

#YourFormID{
    Z-index: 1;
}

然后为图标做

#yourIconID{
    Z-index: 100;
}

这将使表单顶部的图标与photoshop文档中的图层非常相似。如果这还不行，我今晚将从我的电脑上再试一次。但是，如果其他人都说不起作用......这可能是你的问题。

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

3 个答案: