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

Question

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

不幸的是，即使我已经清除了所有内容，仍有白色边框。

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