Css 元素之间不需要的换行符

我需要一个文本输入和一个使用

引导的按钮

，但由于某些原因，它们之间产生了不必要的换行符。我是

bootstrap

新手，所以我不知道发生了什么

<div class="row" style="border:0px solid black">
  <div class="col-xs-2 col-md-2" style="border:0px solid green"></div> 

  <div class="col-xs-8 col-md-8" style="border:2px solid green">    

  <p:autoComplete id="acSimple" value="#{home.searchKeywords}" completeMethod="#{home.completeText}" size="65" /> <!-- size="65" -->

  <p:commandLink action="#{home.goToSearchResults}" onclick=" $('.prgrs').show();">
  <h:graphicImage name="images/searchbutton.jpg" class="img-responsive" style="margin-left:0px; margin-bottom:-0px;"  />
  </p:commandLink>
  </div>        

  <div class="col-xs-2 col-md-2" style="border:2px solid green"></div>
</div>

这就是最终结果：

我需要的是

按钮

正好位于

文本输入的右侧

编辑：一旦我使用

display:inline块根据其中一个答案，它适用于较大的屏幕，但不适用于较小的屏幕。以下是一个屏幕截图：


有什么建议吗
 用于两者：
显示：内联块用于按钮使用<代码>浮动：右侧用于文本输入使用
浮动：左
您必须知道，不仅页面，而且每个部分都将分为12列。
在您的代码中，您已通过以下方式填写了所有这些列：

     <div class="col-xs-2 col-md-2" style="border:0px solid green"></div>
     <div class="col-xs-8 col-md-8" style="border:2px solid green"></div>
     <div class="col-xs-2 col-md-2" style="border:2px solid green"></div>



这篇文章涵盖了整个页面。
因此，主师可以被授予“col-md-12”等级
以下代码必须有帮助：

<div class="row col-xs-12 col-md-12" style="border:0px solid black">
    <div class="col-xs-2 col-md-2" style="border:0px solid green"></div> 
    <div class="col-xs-8 col-md-8" style="border:2px solid green"></div>        
    <div class="col-xs-2 col-md-2" style="border:2px solid green"></div>
</div>


请检查您是否在文本框和图像按钮的代码中使用了不同的行。也可以使用显示：内联块；用于按钮使用：浮动：右侧；左边是文本框，显示的不是html代码。如果您甚至不愿意在显示正确的代码示例方面做出努力，您如何希望其他人努力阅读您的代码并尝试提供帮助？请阅读这本书，它适用于较大的屏幕，但不适用于较小的屏幕。我用截图编辑了这个问题。看起来你在使用引导，引导已经有了响应，所以我不明白为什么会发生这种情况，你能发布一个JSFIDLE吗？此外，似乎您正在使用2个div的
col-xs-2
来居中
col-xs-8
div，您只需使用偏移量即可；在映像上，解决了引导问题。谢谢