在输入框右侧添加 Bootstrap 图标

Question

在输入框右侧添加 Bootstrap 图标

6

我开始使用bootstrap，需要实现以下功能：我有一个输入框，想在右侧添加两个图标，目前将它们分组放到一个'div'中，但是我不太擅长css和设计，希望您能告诉我应该如何实现。

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

- max

2个回答

0

试试这个

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

- UniQue

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Omi · Accepted Answer

.input-group类是一个容器，可以通过在输入框前面或后面添加图标、文本或按钮来增强输入框，作为“帮助文本”。

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

更多信息请参见： 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>