Question

我正在尝试创建一个输入，右侧有一个包含图标的按钮，可以点击这样的

到目前为止，这是我的代码 http://www.bootply.com/udRtNLsCgV

<div class="input-group">
    <input class="form-control" placeholder="Select area...">
    <span class="input-group-addon glyphicon glyphicon-edit" onclick="openDialog()"><a href="#">Area</a></span>
</div>

我的问题是按钮中的字体似乎不是默认字体，输入太宽

Answer 1

单独包含您的图标（在input-group-addon类的div中）。
您可以在CSS中控制输入组的宽度。

HTML：

<div class="input-group">
  <input class="form-control" placeholder="Select area...">
  <span class="input-group-addon" onclick="openDialog()"><a href="#"><i class="glyphicon glyphicon-edit"></i> Area</a></span>
</div>

CSS：

.input-group {
  width: 200px;
}
.input-group-addon > a {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

使用glyphicon按钮输入

1 个答案:

BOOTPLY