如何在Bootstrap中创建响应式搜索框

Question

我正在尝试使用Bootstrap创建一个响应式搜索框。我已经采取了行类并且在行内，我采用了2列。第二列具有表单控件输入和搜索按钮。它在大屏幕上工作得很好，但是当我进入小屏幕或超小屏幕时，搜索按钮会转到下一行，而不是与输入字段保持在同一行。有人可以帮我解决这个问题吗？在此先感谢。[搜索图标位于输入字段下方

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
  <div class='content-wrapper'>
    <div class='row'>
      <div class='col-xs-12 col-sm-12 col-md-8 col-lg-8'>
        <article>
          According to the customer review we are expanding diligently and we have reached over 70 locations. So that you do not lose sight of the overview. You will find a list of FORKS over KNIVES in all locations.
        </article>

      </div>
      <div class='col-xs-12 col-sm-12 col-md-4 col-lg-4'>

        <form class='navbar-form'>
          <div class='form-group'>
            <input class='form-control' type='text' name='search' placeholder='Location'>

          </div>
          <button type='submit' class='btn btn-default'><span class='glyphicon glyphicon-search'></button>
        </form>

      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用带有<span>类

的input-group-btn包裹按钮

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
  <div class='content-wrapper'>
    <div class='row'>
      <div class='col-xs-12 col-sm-12 col-md-8 col-lg-8'>
        <article>
          According to the customer review we are expanding diligently and we have reached over 70 locations. So that you do not lose sight of the overview. You will find a list of FORKS over KNIVES in all locations.
        </article>

      </div>
      <div class='col-xs-12 col-sm-12 col-md-4 col-lg-4'>

        <form class='navbar-form'>
          <div class='input-group'>
            <input class='form-control' type='text' name='search' placeholder='Location' />
            <span class="input-group-btn">
              <button type='submit' class='btn btn-default'>
                <span class='glyphicon glyphicon-search'></span>
              </button>
            </span>

          </div>
        </form>

      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;