使用form-inline防止控制

Question

我正在使用form-inline类将所有控件放在同一行，但我注意到当我调整窗口大小时，文本框附近的按钮转到下一行。我想阻止这个。看一下图片：

这是代码：

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-xs-2 hideable-sidebar">
      <div class="well">
        <span><b>Resources</b></span>
        <form class="form-inline">
          <input type="text" placeholder="type text here"
                 class="form-control" id="resource_filter" />
          <button class="clear btn btn-default btn-sm" type="button"
                  title="clean">
            <span class="glyphicon glyphicon-repeat"></span>
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

您希望在输入组下使用Bootstrap Button Addons。这样它在窗口调整大小期间将保持成比例。确保您的输入和按钮使用相同的大小：

＆＃13;

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 hideable-sidebar">
      <div class="well">
        <span><b>Resources</b></span>
        <form class="form-inline">
          <div class="input-group">
            <input type="text" placeholder="type text here" class="form-control" id="resource_filter" />
            <span class="input-group-btn">
              <button class="clear btn btn-default" type="button" title="clean">
                <span class="glyphicon glyphicon-repeat"></span>
              </button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;