Question

我开始使用bootstrap并且我需要执行以下操作：我有一个输入，我想在右侧添加两个图标，暂时将它们分组为“div” ，但是我要走了，我对css ni设计并不是很好，所以告诉我应该怎么做会很有帮助。

<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类是一个容器，通过在其前面或后面添加图标，文本或按钮作为＆＃34;帮助文本来增强输入。

.input-group-addon类在输入字段旁边附加图标或帮助文本。

更多信息xfer：bootstrap_forms_inputs

＆＃13;

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

＆＃13;

另一种解决方案，您可以使用css属性position和＆amp;的组合。 right在右侧对齐图标。使用top从顶部对齐。添加权限padding即可输入。

＆＃13;

.check-icon {
right:50px;
position:absolute;
top:2px;
}

.times-icon {
right:20px;
position:absolute;
top:2px;
}

.icon-input {
padding-right:60px !important;
}

＆＃13;

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

＆＃13;

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>

在右侧输入内添加bootstrap图标

2 个答案: