如何在 Bootstrap 3 中使 <i> 标记成为 HREF？

Posted 2023-03-06

技术标签:

【中文标题】如何在 Bootstrap 3 中使 <i> 标记成为 HREF？【英文标题】：How to make an <i> tag an HREF on Bootstrap3? 【发布时间】：2015-07-10 09:24:16 【问题描述】：

我正在使用 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，除了所有的引导程序，我只使用这个服装：

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

尽管当点击进入搜索栏时，由于某种原因，字形搜索不会作为按钮工作，因此用户也可以选择点击它来完成他们的搜索。有任何想法吗？ :S

【问题讨论】：

假设你不能在这里使用<image type="image" src="yourglyph.png" alt="submit" />？请提供有关此问题的 JSFiddle。在按钮内使用span。

&lt;button class="btn btn-default" type="button"&gt;&lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;

这个.searchbox 元素在哪里？不能作为按钮工作是什么意思？你看到字形了吗？点击它不起作用吗？ 【参考方案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。

【讨论】：

赢家鸡肉晚餐。据我所知，它不应该用作提交按钮。您必须按 Enter 才能提交表单。这就是我想要做的 - 字形图标已经在里面，我也想让它提交，即使使用标签也不会显示 href 手，但如果我删除 标记 glyphicon-search 不会留在里面 是的，我看到了。我不认为它会，因为这样使用时它不会被视为<a> 标签。当您单击它时，焦点转到输入，我没有看到捕获单击事件的方法。可能是分段输入？你反对改变搜索栏的外观/风格吗？【参考方案2】：

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

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

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

【讨论】：

【参考方案3】：

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