如何防止按钮在 sm 或 xs 屏幕上跳转？

Question

好的，我有这个 bootstrap 表格。我正在尝试让按钮在输入字段之后保持原位。在 lg & md screen'n 中没问题，但在 sm & xs 中按钮会跳到输入字段下方。我怎样才能防止这种情况发生？

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <form class="form-inline well" id="usr_reg_in" name="usr_reg_out" method="post" action="php/usr_time_reg.php">
        <fieldset>
          <div class="control-group">
            <label class="control-label" for="reg_out">Tack för idag</label>
              <div class="controls">
                <div class="input-append">
                  <input id="reg_out" name="reg_out" class="form-control" placeholder="Anst. nr" type="text">
                  <div class="btn-group">
                    <button class="btn btn-danger">Ut</button>
                  </div>
                </div>
              </div>
            </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

Answer 1

由于 Bootstrap 将使所有输入在小于 768px 的屏幕上变为 100% 宽度，另一种选择是使用这样的 input-group..

             <div class="input-group"> 
                  <input id="reg_out" name="reg_out" class="form-control" placeholder="Anst. nr" type="text">
                  <span class="input-group-btn">
                    <button class="btn btn-danger">Ut</button>
                  </span>
             </div>

演示：http://bootply.com/tU94xwqnZU

如何防止按钮在 sm 或 xs 屏幕上跳转？

How to prevent button to jump down in sm or xs screen?

html

forms

twitter-bootstrap