Make Bootstrap 3.0輸入組顯示內聯

我目前正在使用元素進行構造，如果twitter bootsrap 3.0在一個沒有中斷的情況下顯示。當我使一個包裝器浮動時會發生什麼，因爲輸入元素被切斷。Make Bootstrap 3.0輸入組顯示內聯

<form id="commentform" method="post" action="http://devsite.localhost/wp-comments-post.php" name="commentform"> 
    <span class="comment-form-author"><label class="obscure" for="author">Name</label><span class="input-group span2"><input type="text" placeholder="Name *" aria-required="true" tabindex="1" size="30" value="" name="author" id="author" /></span></span> <span class="comment-form-email"><label class="obscure" for="author">Email</label><span class="input-group span3"><input type="text" placeholder="Email *" aria-required="true" tabindex="2" size="30" value="" name="email" id="email" /></span></span> <span class="comment-form-url"><label class="obscure" for="url">Website</label><span class="input-group span3"><input type="text" placeholder="Website" tabindex="3" size="30" value="" name="url" class="input-medium" id="url" /></span></span> 
    <div class="comment-form-comment"> 
     <textarea placeholder="Comment" aria-required="true" tabindex="4" rows="8" cols="45" name="comment" id="comment"> 
     </textarea> 
    </div> 
    <!-- #form-section-comment .form-section --> 
    <p class="form-submit"><input type="submit" value="Post Comment" id="submit" name="submit" /> <input type="hidden" id="comment_post_ID" value="14" name="comment_post_ID" /> <input type="hidden" value="0" id="comment_parent" name="comment_parent" /></p> 
</form>

CSS

@import url('http://my-hardware.net/bs/bootstrap.css'); 

/* hiding content but not from screen readers, used in comments form */ 
.obscure { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
} 

.comment-form-email{ 
    display: block; 
    float: left; 
}

有關說明目的我只是說我試圖將3個imputs我要排隊的一個。

有沒有人有一個想法如何使這項工作？

來源

2013-01-15 James Mitch

我想，也許這是自舉3.0中的問題（在glyphicons不均勻），在[官方網站]（HTTP：//twitter.github .com/bootstrap/index.html）它仍然是2.2.2版本，並使用它的工作很好，像這樣[示例]（http://jsfiddle.net/BTAaU/10/） –

@Lucas Lazaro你不得到它！我想在同一行**中並排輸入字段**。事情已經改變了3.0是的，但沒有任何問題，我不想重新創建示例男人！我想在彼此之後展示他們！我用2.2.2和你**不用**在你的例子中。下次閱讀並觀看CSS！而字形圖標不是隻顯示BC它們根本就不在那裏（在路徑中） –

使用JSFiddle的整潔似乎揭示了一些HTML問題。我會先驗證你的代碼。 – isherwood

我認爲這應該工作...

<div class="controls-row"> 
    <div class="control-group col col-lg-2"> 
     <div class="input-group"> 
      <span class="input-group-addon">X</span> 
      <input type="text"> 
     </div> 
    </div> 
    <div class="control-group col col-lg-2"> 
     <div class="input-group"> 
      <span class="input-group-addon">Y</span> 
      <input type="text"> 
     </div> 
    </div> 
</div>

來源

2013-06-28 02:10:42 Bilbao

Make Bootstrap 3.0輸入組顯示內聯

回答

相關問題