如何在我的标签旁边添加搜索图标?
How to add Search Icon next to my label?
您好,我正在 Angular 4 使用 bootstrap 4 进行设计。
我尝试在我的标签末尾添加搜索图标。
编码如下:
<div class="row ">
<div class="form-group col-lg-2"></div>
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<input type="text" class="form-control" name="LocationId" >
<span class="input-group-btn">
<button class="btn btn-info btn-md" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
<div class="form-group col-lg-4">
<label class="Bold">Description </label>
<input type="text" class="form-control" name="description">
</div>
<div class="form-group col-lg-2"></div>
</div>
但它就像附件中的图片一样。如何在标签末尾添加图标。我的代码有问题吗?
尝试使用bootstrap4input-group组件
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-group">
<label>Username</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
</div>
</div>
</div>
</div>
</div>
Form-control class for Input 使文本框占据整个宽度。我们需要使用 input-group class 来对输入和附加到它的任何图标进行分组。例如,请参考下面的代码片段:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
试试这个。将 input
和 span
包装到 input-group
.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<div class="row ">
<div class="form-group col-lg-2"></div>
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<div class="input-group">
<input type="text" class="form-control" name="LocationId" >
<span class="input-group-append">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<div class="form-group col-lg-4">
<label class="Bold">Description </label>
<input type="text" class="form-control" name="description">
</div>
<div class="form-group col-lg-2">
</div>
</div>
以下是代码片段:
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<input type="text" class="location-txt form-control" name="LocationId" >
<span class="input-group-btn location-search">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
CSS
.location-txt
width: calc(100% - 44px);
float: left;
}
.location-search{
display: inline-block;
float: right;
}
您好,我正在 Angular 4 使用 bootstrap 4 进行设计。 我尝试在我的标签末尾添加搜索图标。
编码如下:
<div class="row ">
<div class="form-group col-lg-2"></div>
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<input type="text" class="form-control" name="LocationId" >
<span class="input-group-btn">
<button class="btn btn-info btn-md" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
<div class="form-group col-lg-4">
<label class="Bold">Description </label>
<input type="text" class="form-control" name="description">
</div>
<div class="form-group col-lg-2"></div>
</div>
但它就像附件中的图片一样
尝试使用bootstrap4input-group组件
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-group">
<label>Username</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
</div>
</div>
</div>
</div>
</div>
Form-control class for Input 使文本框占据整个宽度。我们需要使用 input-group class 来对输入和附加到它的任何图标进行分组。例如,请参考下面的代码片段:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
试试这个。将 input
和 span
包装到 input-group
.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<div class="row ">
<div class="form-group col-lg-2"></div>
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<div class="input-group">
<input type="text" class="form-control" name="LocationId" >
<span class="input-group-append">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<div class="form-group col-lg-4">
<label class="Bold">Description </label>
<input type="text" class="form-control" name="description">
</div>
<div class="form-group col-lg-2">
</div>
</div>
以下是代码片段:
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<input type="text" class="location-txt form-control" name="LocationId" >
<span class="input-group-btn location-search">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
CSS
.location-txt
width: calc(100% - 44px);
float: left;
}
.location-search{
display: inline-block;
float: right;
}