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

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

老实说，我觉得按钮很痛苦，而且已经过时了。我更喜欢使用简单的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>

Answer 2

你可以玩位置：亲戚，

例如：

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/