css - 如何在 Bootstrap 3 中调整输入/提交框的大小

Question

我有一个相当简单的大型输入以及一个使用 bootstrap3 框架的提交框，它在桌面/平板电脑分辨率上完美显示，但在移动视口(viewport)下查看，提交按钮在输入框下方滑动，看起来相当丑陋.

如何缩小输入/提交按钮以适当调整大小，使它们不会相互重叠，或者如果这不可能，则让提交按钮仅在移动屏幕尺寸上居中对齐？

<div class="col-md-8 col-md-offset-4">          
  <div class="input-group input-group-lg">
    <form class="navbar-form navbar-left" role="search" action="../includes/some.php"     method="POST" id="navbar">
      <div class="form-group">
        <input type="text" class="form-control" id="focusedInput" autocomplete="off"  maxlength="17" placeholder="Enter number" name="number">            
      </div>
     <button type="submit" class="btn btn-primary submit-btn" data-toggle="tooltip" data-placement="bottom" title="something">SUBMIT</button>             
   </form>
  </div>
</div>

fiddle 在这里 - http://jsfiddle.net/uradA/3/

Answer 1

做这样的事情，取自 Button addons :

<div class="col-lg-6">
  <div class="input-group">
    <input type="text" class="form-control big">
    <span class="input-group-btn">
      <button class="btn btn-primary big" type="button">Submit</button>
    </span>
  </div>
</div>

big 是:

.big {
  font-size: 30px;  
  height: 80px;
}

这是更新后的示例:jsfiddle.net/uradA