Twitter Bootstrap 3：带验证问题的输入加载项

Question

所以我在Twitter Bootstrap 3中遇到了一个有趣的问题..在表单中对输入加载项进行验证时似乎存在格式问题。附加组件在调整大小时移动，并且在按钮刚移动的情况下移动。直接来自twitter bootstrap页面

    <div class="input-group has-success">
      <label class="control-label" for="inputSuccess1">Input with success</label>
      <input type="text" class="form-control"/>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div>

如下所示

这是一个与

一起玩的JSFiddle

http://jsfiddle.net/HdxT3/

关于如何解决这个问题的想法？

Answer 1

无需进行所有CSS修改。 Bootstrap允许您本机执行此操作：

<div class="form-group has-success">
    <label class="control-label" for="inputSuccess1">Input with success</label>
    <div class="input-group">    
        <input type="text" class="form-control"/>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
    </div>
</div>

Answer 2

我稍微更改了结构，并添加了一些css

<强>标记式

  <div class="input-group has-success">
      <label class="control-label" for="inputSuccess1">Input with success
        <span class="input-group-btn">
       <input type="text" class="form-control"/> 
       <button class="btn btn-default" id="style" type="button">Go!</button>
        </span>     
        </label>
    </div>

<强> CSS

#style{

    margin-left: -4px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-left: none;
}

示例Fiddle

Answer 3

在你的CSS中：

.control-label{
    display: table-caption;
}

http://jsfiddle.net/HdxT3/3/