Question

如何使它在具有相同高度的输入页面后显得很好？

<div class="input-group">
        <input type="text" class="form-control"/>
        <button class="input-group-addon" type="submit">
            <i class="fa fa-search"></i>
        </button>
</div>

这是代码http://jsfiddle.net/6mcxdjdr/第一个是原始输入组，第二个是我想要的东西

Answer 1

如果您关注bootstrap's documentation：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-default" type="submit">
        <i class="fa fa-search"></i>
    </button>
  </span>
</div>

Answer 2

这是我的解决方案，使用一点CSS将按钮放在输入字段的右侧，方法是添加position: absolute和z-index：

button.input-group-addon {
  position: absolute;
  right: -38px;
  top: 0;
  padding: 2px;
  z-index: 999;
  height: 34px;
  width: 38px;
}

http://jsfiddle.net/6mcxdjdr/1/

另一个想法是使用javascript操作表单提交，因此您不必创建自己的按钮，而是通过单击引导跨度来提交表单。这可以通过以下方式完成 $('.input-group-addon').click(function(){ $('#myform').submit(); });

Answer 3

试试这个，

.input-group-addon{
width:50px;  
position:absolute;
margin-left:196px;
height:34px;
}
.input-group-addon > i{
  text-align:center;
  font-size:18px;
}

Answer 4

我是这样做的，我不得不重写一些css ......

（Bootstrap 4 Beta 2）

HTML

    <div class="input-group">
        <input type="search" class="form-control" placeholder="search..." />
        <span class="input-group-addon input-group-addon-btn bg-white">
            <button class="btn px-2" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
        </span>
    </div>

这是css

#app-search .input-group-addon-btn {
    padding: 0;

    button {
        border: none;
        background: transparent;
        cursor: pointer;
        height: 100%;
    }
}

Answer 5

您也可以尝试这种方式

 <div class="input-group">
          <input type="text" class="form-control search-input" />
          <span class="input-group-addon">
            <i class="fa fa-search"></i>
          </span><span class="input-group-addon">
            <i class="fa fa-refresh"></i>
          </span>
        </div>

.search-input {
  border-right: 0;
}

.input-group-addon {
  background: white;
  border-left: 0;
  border-right: 0;
}

.input-group-addon:last-child {
  border-left: 0;
  border-right: 1px solid #ccc;
}

Answer 6

Bootstrap 4提供了input-group-prepend和input-group-append类，它们允许在输入内部实现按钮的作用。

在代码段下方的输入组（类input-group-prepend）中的左对齐按钮：

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";

<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Prepended button</button>
  </div>
  <input type="text" class="form-control">  
</div>

以及输入组（类input-group-append）中右对齐按钮的代码段：

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";

<div class="input-group">
  <input type="text" class="form-control">  
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

输入组内的Bootstrap按钮

6 个答案: