搜索栏无法正确显示 - bootstrap＆amp;轨道

Question

我正在尝试在我的网站上放置一个带有三个按钮的搜索栏。按钮代表3种不同的搜索（因此它们更像是切换）。

我尝试了这段代码，但输出并不像预期的那样：

<div class="row search-row">
  <div class="col-lg-6">
    <div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">
      <span class="glyphicon glyphicon-search"></span></button></span><span class="input-group-btn"><button class="btn btn-default" type="button">
      <input id="file-button" src="text.png" type="image"></button></span><span class="input-group-btn"><button class="btn btn-default" type="button">
      <span class="glyphicon glyphicon-file"></span>
    </button></span><input class="form-control" type="text"><span class="input-group-btn"><button class="btn btn-default" type="button" value="Go"></button></span>
    </div>
  </div>
</div>

这是一个屏幕截图，顶部是未经编辑的，底部是我试图引起注意的问题：

如何让所有按钮和文本看起来都像是相同的输入（没有碰撞）？

Answer 1

此代码修复了它：

<div class="container">
  <div class="row search-row">
    <div class="container col-lg-6">
      <div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">
        <span class="glyphicon glyphicon-search"></span></button><button class="btn btn-default" type="button">
        <input id="file-button" src="text.png" type="image"></button><button class="btn btn-default" type="button">
        <span class="glyphicon glyphicon-file"></span>
      </button></span><input class="form-control" type="text"><span class="input-group-btn"><a class="btn btn-default go-search" href="#">Go</a></span>
      </div>
    </div>
  </div>
</div>

截图：

基本上，左侧的所有按钮都应该有一个按钮组范围。我将“go”按钮更改为链接，因为无论如何我都需要它。