Question

您好我正在使用bootstrap 4进行Angular 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>

但它就像附加图像。如何在标签末尾添加图标。我的编码有问题吗？

Answer 1

尝试使用bootstrap4的 input-group 组件

＆＃13;

<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>

＆＃13;

Answer 2

试试这个。将input和span换行到input-group。

＆＃13;

<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>

＆＃13;

Answer 3

输入的表单控件类使文本框占据整个宽度。我们需要使用输入组类来对输入和附加到它的任何图标进行分组。请参阅下面的代码段：

<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
    <i class="fa fa-search"></i>
</span>
</div>

Answer 4

以下是代码段：

<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;
}

如何在我的标签旁边添加搜索图标？

4 个答案: