Question

我正在使用Bootstrap 3，无法在右侧获得图标/按钮而不会产生恼人的边框。有人可以给我一个类似的演示吗？

HTML：

<div class="input-group">
  <input type="search" name="Søk på siden" placeholder="Søk etter midtveisvurdering, IKO modellen eller hva du måtte ønske!" id="input" class="form-control" value="" required="required" title="Søk på siden">
  <span class="input-group-addon">
    <button type="button" class="btn btn-search">
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </button>
  </span>
</div>

CSS：

.form-control {
  display: block;
  width: 100%;
  height: 50px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857;
  color: #555555;
  background-color: $lightgray;
  background-image: none;
  border-bottom: 3px solid $whiteblue;
  border-radius: 0;
}

.btn-search {
  color: $silver;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.15);
}

.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #FAFBFD;
  border: 0;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-left: 1px solid #FAFBFD;
  border-bottom: 3px solid $whiteblue;
  border-radius: 0;
}

For the moment it looks like this

Answer 1

这可能是因为你使用了一个按钮。尝试输出如下：

    <div class="input-group">
      <input type="search" name="Søk på siden" placeholder="Søk etter midtveisvurdering, IKO modellen eller hva du måtte ønske!" id="input" class="form-control" value="" required="required" title="Søk på siden">
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      </span>
    </div>

您可能需要添加

.glyphicon-search{
  float: right;
}

或类似的东西。

Answer 2

将按钮位置更改为＆＃34;绝对＆＃34;并做了填充。在新课程中包含所有这些。无论如何，谢谢你帮助我，但我已经有了解决方案：）

里面有glyphicon的搜索栏（无边框）

2 个答案: