如何在 Bootstrap 3 中制作 <i> 标签和 HREF?
How to make an <i> tag an HREF on Bootstrap3?
我正在使用 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除了所有的bootstrap:
,我只用过这套服装
.searchbox {
border-radius: 20px;
height: 25px;
margin-top: 5px;
}
即使点击进入搜索栏时,由于某种原因,glyphicon-search 不能作为按钮使用,所以用户也可以选择点击它来完成他们的搜索。
有任何想法吗 ? :S
我的标准猜测是基于一个假设,因为我没有你的代码的工作版本。
锚标记通常没有自己设置的特定高度或宽度。很可能您的锚标记没有宽度或高度,而您的图标有。
右键单击图标并选择检查元素,打开浏览器的开发工具。你应该可以从那里解决它。
您在 <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。
我的猜测。如果这不起作用将是 z 索引。我的 phone 上没有 firebug,但是无论如何,如果您将鼠标悬停在它上面,它只会突出显示搜索栏吗?或者你能突出显示图标吗?如果你不能......在你的 CSS 中改变表单的 Z-index 比方说
#YourFormID{
Z-index: 1;
}
然后为图标做
#yourIconID{
Z-index: 100;
}
这将使图标位于表单顶部,就像 photoshop 文档中的图层一样。如果还是不行,我今晚会在我的电脑上再试一次。但是,如果其他人所说的不起作用...这可能是您的问题。
我正在使用 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除了所有的bootstrap:
,我只用过这套服装.searchbox {
border-radius: 20px;
height: 25px;
margin-top: 5px;
}
即使点击进入搜索栏时,由于某种原因,glyphicon-search 不能作为按钮使用,所以用户也可以选择点击它来完成他们的搜索。 有任何想法吗 ? :S
我的标准猜测是基于一个假设,因为我没有你的代码的工作版本。
锚标记通常没有自己设置的特定高度或宽度。很可能您的锚标记没有宽度或高度,而您的图标有。
右键单击图标并选择检查元素,打开浏览器的开发工具。你应该可以从那里解决它。
您在 <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。
我的猜测。如果这不起作用将是 z 索引。我的 phone 上没有 firebug,但是无论如何,如果您将鼠标悬停在它上面,它只会突出显示搜索栏吗?或者你能突出显示图标吗?如果你不能......在你的 CSS 中改变表单的 Z-index 比方说
#YourFormID{
Z-index: 1;
}
然后为图标做
#yourIconID{
Z-index: 100;
}
这将使图标位于表单顶部,就像 photoshop 文档中的图层一样。如果还是不行,我今晚会在我的电脑上再试一次。但是,如果其他人所说的不起作用...这可能是您的问题。