html - 如何在 Bootstrap3 上将标签设为 HREF？

Answer 1

您错过了"after的关闭<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

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

锚标记通常不会自行设置特定的高度或宽度。您的锚标签很可能没有宽度或高度，而您的图标却有。

通过右键单击图标并选择检查元素来打开浏览器的开发工具。您应该可以从那里解决问题。

Answer 3

我猜。如果这不起作用将是 z 索引。我的手机上没有萤火虫，但无论如何，如果你将鼠标悬停在它上面，它只会突出显示搜索栏吗？或者你能突出显示图标吗？如果你不能......在你的 CSS 中改变表单的 Z-index 让我们说

#YourFormID{
    Z-index: 1;
}

然后为图标做

#yourIconID{
    Z-index: 100;
}

这会将图标放在表单顶部，就像 Photoshop 文档中的图层一样。如果还是不行，我今晚会在我的电脑上再试一次。但是，如果其他人所说的都不起作用……这可能是您的问题。