Bootstrap 添加带有标签的文本框按钮

Question

我有以下 bootstrap 代码用于显示带有按钮的文本字段：

 <div class="form-group">
   <div class="input-group">
      <span class="input-group-btn">
      <button class="btn btn-default" type="button">Go!</button>
      </span>
      <label>Second Column</label>
      <input type="text" class="form-control" placeholder="Search for...">
   </div>
   <!-- /input-group -->
</div>

我应该得到这样的东西：

但我得到的是：

我猜是因为 <label> 标签。

Any clue on how can I fix this?

Answer 1

我认为你需要将 label 移到 .input-group

之外

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
   <label for="field1">Second Column</label>
   <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input id="field1" type="text" class="form-control" placeholder="Search for...">
   </div>
</div>

Bootstrap 添加带有标签的文本框按钮

Bootstrap textfield button add on with label

css

twitter-bootstrap

twitter-bootstrap-3