Question

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

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

<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>

小提琴在这里 - 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

Answer 2

试试这个

<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="col-xs-12 col-sm-8 form-group">
            <input type="text" class="form-control" id="focusedInput" style="width:100%" autocomplete="off" maxlength="17" placeholder="Enter number" name="number"/>
        </div>
        <div class="col-xs-12 col-sm-4 form-group">
        <button type="submit" class="btn btn-primary btn-block submit-btn" data-toggle="tooltip" data-placement="bottom" title="something">SUBMIT</button>
        </div>
    </form>
</div>
</div>

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

2 个答案: