Twitter Bootstrap 3：通過驗證輸入附加問題

因此，我已經遇到了一個有趣的問題與Twitter Bootstrap 3 ..似乎有一個格式化問題時，對錶單中的輸入附加的驗證。插件get的大小和按鈕剛剛移動。從Twitter的引導頁面Twitter Bootstrap 3：通過驗證輸入附加問題

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

直接貌似以下

Screen Shot of Issue

這裏有一個的jsfiddle到關於如何解決這個問題

http://jsfiddle.net/HdxT3/

思考玩？

來源

2014-02-06 Chad Brown

不需要所有的CSS修改。引導讓你本身做：

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

來源

2014-02-06 18:29:40

的OP不使用CSS ..他們純粹使用類在他們的小提琴。 – sircapsalot

是的，我指的是其他答案中的CSS黑客。我告訴OP他不需要這些，因爲他可以純粹在Bootstrap中完成。 –

我正在給我的回答添加評論，但我會留下它以防止他人幫忙。這是更好的解決方案。 –

我改變了結構的一點點，並添加了一些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

來源

2014-02-06 18:25:30 rockStar

在你的CSS：

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

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

來源

2014-02-06 18:30:33

您應該使用Leo Jweda的回答，而使用標準的Bootstrap控件是正確的方法。 –

Twitter Bootstrap 3：通過驗證輸入附加問題

回答

相關問題