Twitter Bootstrap 3：带有验证问题的输入插件答案

【问题标题】：Twitter Bootstrap 3: Input Add-On with Validation IssueTwitter Bootstrap 3：带有验证问题的输入插件
【发布时间】：2014-02-06 18:15:04
【问题描述】：

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

OP 不使用 CSS.. 他们纯粹在 Fiddle 中使用类。
是的，我指的是其他答案中的 CSS hack。我告诉 OP 他不需要这些，因为他可以完全在 Bootstrap 中完成。
我正在为我的答案添加评论，但我会留下它以防它帮助其他人。这是更好的解决方案。
只有我，或者这不再有效。它只设置输入框的样式，而不是按钮的样式。
在 jsfiddle 中尝试 OP 使用它似乎不再起作用了。

【解决方案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

【讨论】：

【解决方案3】：

在您的 CSS 中：

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

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

【讨论】：

您应该改用 Leo Jweda 的答案，这是使用标准 Bootstrap 控件的正确方法。