在右侧输入内添加bootstrap图标

Question

我开始使用bootstrap并且我需要执行以下操作:我有一个输入,我想在右侧添加两个图标,暂时将它们分组为' div',但是我要走了,我对cssni的设计不太满意,所以告诉我应该怎么做会很有帮助.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-lg-4">
<input type='text' value='' class='form-control'><a><i class='fa fa-check-circle fa-2x' aria-hidden='true'></i></a> <a><i class='fa fa-times-circle fa-2x' aria-hidden='true'></i></a>
</div>

Answer 1

该.input-group班是一个容器,通过添加图标,文本或前一个按钮或背后的"帮助文本",以提高输入.

该.input-group-addon班重视旁边输入栏图标或帮助文本.

有关更多信息xfer:bootstrap_forms_inputs

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="col-lg-4">
  <div class="input-group">
    <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
    <span class="input-group-addon transparent">
    <i class='fa fa-check-circle fa-lg' aria-hidden='true'></i></span>
    <span class="input-group-addon transparent">
    <i class='fa fa-times-circle fa-lg' aria-hidden='true'></i></span>
  </div>
</div>

另一种解决方案,您可以使用css属性position和right右侧对齐图标的组合.用于top从顶部对齐.添加权限padding输入.

.check-icon {
right:50px;
position:absolute;
top:2px;
}

.times-icon {
right:20px;
position:absolute;
top:2px;
}

.icon-input {
padding-right:60px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-lg-4">
<input type='text' value='' class='form-control icon-input'><a><i class='fa fa-check-circle fa-2x check-icon' aria-hidden='true'></i></a> <a><i class='fa fa-times-circle fa-2x times-icon' aria-hidden='true'></i></a>
</div>

Answer 2

尝试这个

<div class='input-group form-group'>
<label class='input-group-addon'><i class='fa fa-check-circle fa-2x'></i></label>
<label class='input-group-addon'><i class='fa fa-times-circle fa-2x'></i></label>
<input type="text" value="" class="form-control"/>
</div>