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

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

Creating a minimal input field and button with Bootstrap 3

css

twitter-bootstrap-3