如何在输入表单中添加按钮取消

Question

我想做这样的事情。  

但是我不知道如何在Bootstrap中正确地做

这是我的html代码，我只能这样获得。

<form class="navbar-form" role="search">
<div class="input-group add-on">
<input type="text" [(ngModel)]="text" class="form-control" placeholder="Search" name="text">
<button class="btn btn-default" type="submit" (click)="clear()"><i class="glyphicon glyphicon-remove"></i></button>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" (click)="search()"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>

Answer 1

您可以尝试以下位置：相对

例如：

html：

<form class="navbar-form" role="search">
    <div class="input-group add-on">
        <input type="text" [(ngModel)]="text" class="form-control" placeholder="Search" name="text">
        <button class="btn btn-default test" type="submit" (click)="clear()"><i class="glyphicon glyphicon-remove"></i></button>
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit" (click)="search()"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>
</form>

css：

.form-control {
  position:relative;
}
.test {
  position:relative;
  right:20px;
}

示例jsfiddle：https://jsfiddle.net/DTcHh/92025/

Answer 2

老实说，纽扣在屁股上是一种痛苦，并且已经过时了。我宁愿使用简单的div，a或本例中的i标签。

因此，这可能不是OP所要求的，但在我看来这是一个更优雅的解决方案。

此解决方案的秘诀是在包装器上使用flex属性，这使得可以在其空间内自动调整其子级大小。

.field {
  display: flex;
  position: relative;
  max-width: 285px;
  min-width: 200px;
  width: 100%;
  flex-direction: row;
}

请查看代码段中的更具体示例。这适用于所有现代浏览器和Internet Explorer 10。

var input = document.getElementById("search");

function clearInput() {
  input.value = "";
}

function search () {
  console.log("searching");
  // Implement search function here...
}

.field {
    display: flex;
    position: relative;
    max-width: 285px;
    min-width: 200px;
    width: 100%;
    flex-direction: row;
}

.field > input[type=text] {
    flex: 1;
    padding: 0.6em 0.6em 0.6em 1.5em;
    border: 1px solid #c4c4c4;
    border-right: none;
    display: block;
}

.field > div {
    padding: 0.4em 0;
    background-color: #fff;
    border: 1px solid #c4c4c4;
    border-left: none;
    border-radius: 1px;
    display: inline-block;
    cursor: pointer;
}

.field > div > i {
    padding: 0.2em 0.8em;
    background-color: inherit;
    color: #555555;
    border: none;
    border-left: 1px solid #c4c4c4;
    margin-right: 1px;
}

.field > div:last-child > i {
  border-left: none;
}

.field > div:hover > i {
  color: #009BDB;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div class="field">
	<input type="text" id="search" placeholder="Search..." />
	<div>
    <i class="fa fa-times" onclick="clearInput()"></i>
	</div>
	<div>
    <i class="fa fa-search" onclick="search()"></i>
	</div>
</div>