Bootstrap：保持輸入字段在流暢範圍內嵌入

Question

如何在每個流體跨度內嵌入輸入字段？

  <div class="row-fluid show-grid"> 
       <div class="span6"><label>First Name:</label><input type="text"/></div> 
       <div class="span6">span6</div> 
      </div> 
      <div class="row-fluid show-grid"> 
       <div class="span6">span6</div> 
       <div class="span6">span6</div> 
      </div> 
      <div class="row-fluid show-grid"> 
       <div class="span6">span6</div> 
       <div class="span6">span6</div> 
      </div> 

我將動態生成每一行。嘗試將display:更改爲內嵌或inline-block,show-grid類，但它不起作用。

.show-grid [class*="span"] { 
    background-color: #ddd; 
    text-align: left; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    min-height: 40px; 
    line-height: 40px; 
    margin-top: 10px; 
    display: inline; 
} 

Answer 1

可以在每個span6使用類form-inline：

http://jsfiddle.net/TTVG8/

HTML

<div class="row-fluid show-grid"> 
    <div class="span6 form-inline"> 
     <label>First Name:</label> 
     <input type="text" /> 
    </div> 
    <div class="span6">span6</div> 
</div> 
<div class="row-fluid show-grid"> 
    <div class="span6">span6</div> 
    <div class="span6">span6</div> 
</div> 
<div class="row-fluid show-grid"> 
    <div class="span6">span6</div> 
    <div class="span6">span6</div> 
</div> 

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 
.show-grid[class*="span"] { 
    background-color: #ddd; 
    text-align: left; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    min-height: 40px; 
    line-height: 40px; 
    margin-top: 10px; 
    display: inline; 
} 

Answer 2

卡米爾是對的。更改爲display:inline，或者作爲最後的資源float:left;