Bootstrap 3 - 将按钮附加到文本字段

Question

使用下面的Bootstrap 3（最新）代码......

<form>
<div class="row">
 <div class="col-sm-8">
  <label class="control-label">Text Field Label</label>
  <div class="input-group">
   <input name="f1" value="" class="form-control" type="text" size="20" maxlength="100" placeholder="Text Field">
   <div class="input-group-btn">
    <button id="b1" type="submit" class="btn btn-success">Button Label</button>
   </div>
  </div>
 </div>
 <div class="col-sm-4">
 <!-- Other elements to go here -->
 </div>
</div>
</form>

以上代码在我测试的所有浏览器上呈现如下（屏幕截图）：

但无论我尝试什么组合，如果按钮中有超过2或3个字符，按钮会包装文本并显得太大（高于文本输入字段） - 如何修复此项以允许按钮包含更多文本而不显示比文本输入字段更大（高度）？

请注意 - 我不想使用“form-inline”，因为我需要在行中包含其他元素 - 我只包含包含相关表单元素的列。

Answer 1

检查DEMO，您的代码看起来不错。

Maybe you missed load Jquery 1.11.x ?

加载订单：

• bootstrap.min.css
• jquery.min.js（1.11或+）
• bootstrap.min.js

作为最后一个选项，“检查”按钮并检查是否正在应用其他类。