使用Bootstrap 3创建最小输入字段和按钮

Question

我正在尝试使用glyphicon按钮创建一个非常小的输入字段。

不幸的是，即使我清除了所有东西，也会有白色边框。

HTML：

<div class="input-group input-group-lg">
  <input type="text" class="form-control transp" placeholder="Search">
  <span class="input-group-btn">
    <button class="transp btn btn-default " type="button"><i class="glyphicon glyphicon-search"></i></button>
  </span>
</div>

CSS：

.transp {
            background:none!important;
            background-color: rgba(255,255,255,0.8)!important;
            border:none!important;
            border-color:none!important;
            text-shadow:none!important;
            box-shadow:none!important;
        }

将此Bootply示例视为白色按钮边框的演示：

Bootply - Button Border

Answer 1

.input-group-btn:last-child>.btn上的边距是原因。

将此添加到您的CSS：

.input-group-btn:last-child>.transp {
    margin-left: 0;
}