Question

我正在使用Bootstrap构建一个网页，其中包含一个填充了名称的列表框和一个用于过滤这些名称的搜索框。搜索框中有一个glyphicon-remove按钮，在输入时会显示。单击此按钮会清除搜索框。我的问题是图标导致搜索框的大小缩小，我无法弄清楚为什么会发生这种情况。

以下是它的样子：

以下是它应该是什么样子：

我可以通过使用CSS为它设置一个宽度来解决问题，但是我想让它像窗体的其余部分一样调整窗口大小。

HTML：

<div class="col-lg-4">
<form>
    <div class="form-group has-feedback">
        <label for="txtFilter">Select A User</label>
        <div class="input-group">
            <input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
            <span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
        </div>
    </div>
    <div class="form-group">
        <select class="form-control" id="lstUsers" size="8"></select>
    </div>
</form>

CSS：

.filter-icon{
cursor: pointer;
pointer-events: all;
z-index: 3;}

Answer 1

每当图标消失时，框似乎不会改变形状。你确定没有任何其他可能存在冲突的CSS吗？否则似乎没有其他解释，因为您提供的代码不会产生错误。

.filter-icon{
cursor: pointer;
pointer-events: all;
z-index: 3;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4">
<form>
    <div class="form-group has-feedback">
        <label for="txtFilter">Select A User</label>
        <div class="input-group">
            <input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
            <span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
        </div>
    </div>
    <div class="form-group">
        <select class="form-control" id="lstUsers" size="8"></select>
    </div>
</form>
</div>
</div>
</div>

Answer 2

您可以尝试此代码

HTML

<html>
<head>
<title>SSSSSS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="col-lg-12">
<form>
 <div class="col-lg-12 form-group has-feedback">
        <label for="txtFilter">Select A User</label>
 </div>
 <div class="col-lg-12 form-group">      
  <input id="txtFilter" type="search" class="form-control" placeholder="Filter by name">
  <span id="searchclear" class="glyphicon glyphicon-remove"></span>
</div>


    <div class="col-lg-12 form-group">
        <select class="form-control" id="lstUsers" size="8"></select>
    </div>
</form>
</div>
</body>
</html>

CSS

#searchclear {
    position: absolute;
    right: 18px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

Jquery

$("#searchclear").click(function(){
    $("#txtFilter").val('');
});
$(document).ready(function(){
 $('#searchclear').css("display","none");
$('#txtFilter').keyup(function () { 
 $('#searchclear').css("display","block");
});
})

Answer 3

我能够通过使用下面的Kasunjuth Bimal代码变体来解决这个问题。关键是我需要将'input-group'类更改为'form-group'。然后我能够将图标与一些额外的CSS重新对齐。这是我更新的代码：

<form>
<div class="form-group has-feedback">
    <label for="txtFilter">Select A User</label>
    <div class="form-group relative">
        <input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
        <span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
    </div>
</div>
<div class="form-group">
    <select class="form-control" id="lstUsers" size="8"></select>
</div>

.filter-icon{
position: absolute;
right: 1px;
cursor: pointer;
pointer-events: all;
z-index: 3;
}

.relative{
position: relative;
max-width: 280px;
}

添加glyphicon会改变文本框的大小

3 个答案: