Twitter Bootstrap 3：输入附加验证问题 [英] Twitter Bootstrap 3: Input Add-On with Validation Issue

问题描述

所以我用Twitter Bootstrap 3遇到了一个有趣的问题。当在表单中对输入插件进行验证时，似乎存在一个格式问题。插件get的大小和按钮刚刚移动。直接从twitter引导页面

 < div class =input-group has-success> 
< label class =control-labelfor =inputSuccess1>输入成功< / label> 
< input type =textclass =form-control/> 
< span class =input-group-btn> 
< button class =btn btn-defaulttype =button> Go！< / button> 
< / span> 
< / div> 
  

看起来像下面那样：

以下是JSFiddle与

http://jsfiddle.net/HdxT3/

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

解决方案

不需要所有的CSS修改。 Bootstrap允许您在本地执行此操作：

 < div class =form-group has-success> 
< label class =control-labelfor =inputSuccess1>输入成功< / label> 
< div class =input-group> 
< input type =textclass =form-control/> 
< span class =input-group-btn> 
< button class =btn btn-defaulttype =button> Go！< / button> 
< / span> 
< / div> 
< / div> 
  

So I've run into an interesting issue with Twitter Bootstrap 3 .. seems like there's a formatting issue when doing validation on input add-on's within a form. The add-on get's shifted in sizing and in the case of a button just shifted. Direct from the twitter bootstrap page

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

Looks like the following

Here's a JSFiddle to play with

http://jsfiddle.net/HdxT3/

Thoughts on how to fix this?

解决方案

No need for all the CSS modifications. Bootstrap allows you to do this natively:

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

这篇关于Twitter Bootstrap 3：输入附加验证问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！