如何消除引导程序中并排元素之间的间隙

Question

我正在尝试创建一个谷歌搜索风格的网页。以下是我的相关html片段：

<div class="row">
<div class=col-md-2></div>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
<div class="col-md-2" style="text-align:left;">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>

尽管这是有效的，但它在输入框和搜索按钮之间留下了明显的间隙。

我想知道是否有办法消除这两个要素之间的差距。

Answer 1

这就是您想要的：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="input-group mb-3">
<input type="text" class="form-control" aria-describedby="searchBtn">
<div class="input-group-append">
<button class="btn btn-default" type="submit" id="searchBtn"><i class="glyphicon glyphicon-search"></i>[search icon]</button>
</div>
</div>

您可能需要阅读文档。