元素之间不需要的换行符

Question

我需要使用bootstrap进行文字输入和按钮，但出于某种原因，他们之间会创建不需要的换行符。我是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>

这是最终结果：

我需要的是button位于text input的右侧。

编辑：根据其中一个答案使用display: inline-block;后，它适用于较大的屏幕，但不适用于较小的屏幕。这是一个截图：

有什么建议吗？

Answer 1

同时使用display: inline-block;按钮使用float: right;，文字输入使用float: left;

Answer 2

您必须知道，不仅页面而且每个部门都将分为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>

这完全覆盖了整个页面。  因此，主分部可以获得一个班级＆＃39; col-md-12＆＃39; 以下代码必须提供帮助：

<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>