使用boostrap右侧防止元素包裹

Question

我有一个搜索框，我想对齐页面的右侧。在右边我想要“GO”按钮进行搜索。我正在使用pull-right在大屏幕上正常工作，但是当它缩小时，按钮会下降到输入字段下方。解决这个问题的最佳方法是什么？

     <div class="col-sm-12">
        <div class="clearfix pull-right">
            <form method="get" action="" name="searchForm">
                <div class="form-group form-inline">Keyword Search: <input class="form-control" type="text" name="search" value=""> 
                    <input type="button" onclick="document.searchForm.submit()" value="Go" class="btn btn-primary">
                </div>
            </form>
         </div>
      </div>

大屏幕

小屏幕（换行）

Answer 1

关键字搜索应该是一个标签，您可以定义控件的大小。请检查以下示例： http://getbootstrap.com/css/#forms-horizontal

Answer 2

重新构建您的标记并添加一些自定义CSS来复制您拥有的表单。

将每个元素划分为不同的表单组，并为每个表单分配col-xs-*个类。

＆＃13;

＆＃13;

label {
  white-space: nowrap;
  font-weight: normal !important; /* Avoid important, added here for the sake of SO snippet */
}
.form-group {
  padding: 0 5px !important;
  line-height: 30px;
  vertical-align: middle;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline pull-right">
  <div class="form-group col-xs-4">
    <label>Keyword Search:</label>
  </div>
  <div class="form-group col-xs-6">
    <input type="text" value="" name="search" class="form-control">
  </div>
  <div class="form-group col-xs-2">
    <input type="button" class="btn btn-primary" value="Go" onclick="document.searchForm.submit()">
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;