Twitter的引導 - 垂直對齊輸入與內部控制組

<div class="control-group"> 
    <label class="control-label ">Date of purchase as detailed on your receipt</label> 
    <div class="controls"> 
     <div class="input-append"> 
      <select name="invoice_date" value="2013-06-28" required="required"> 
       <option value="">Please Select</option> 
      </select> 
      <button type="button" class="btn info btn-primary" data-help="invoice_date">i</button> 
     </div> 
    </div> 
</div>

標籤我嘗試了一些解決方案，並1種使用絕對位置的工作，但這種影響尤其引導其他領域時，它得到響應。Twitter的引導 - 垂直對齊輸入與內部控制組

http://jsfiddle.net/tGZLd/

我試圖讓輸入與已被推多行標籤的中心，但在引導的最佳實踐來排隊。

或者我應該簡單地放棄並強制它顯示下面的輸入的全寬標籤？

任何洞察力將是偉大的，謝謝！

來源

2013-07-24 Hard-Boiled Wonderland

我接着說：邊距：10px的''div.input-append'，這似乎使它看起來不錯，但不知道如果這就是你要去的。利用邊距和填充而不是定位，以便您添加的其他輸入也會受到這些更改的影響。讓我知道這是怎麼回事 – aug

我只是將'select'和'button'標籤的css添加到'style =「vertical-align：text-top」'。那是你在找什麼？工作小提琴：http://jsfiddle.net/EwD6Z/ – jlars62

@aug這是一個停止差距的解決方案，可以工作，如果我設置多個樣式，但我正在尋找更動態的東西。 –

如何重寫引導的風格和使用display:inline-block;代替彩車的定位，那麼你可以使用vertical-align居中標籤：

.form-horizontal .control-label { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 
.form-horizontal .controls { 
    display: inline-block; 
    margin-left: 20px; 
}

Example fiddle

來源

2013-07-24 22:42:52

我剛剛測試過這個，儘管我只做了輕度測試，但它的響應速度很快，它實際上解決了我在使用Bootstrap時遇到的另一個問題。這太簡單了，也不敢相信我錯過了，謝謝。 –

-1

向input-append添加一個類，然後對其應用邊距。

<div class="input-append spacedTop">

然後添加CSS

.spacedTop { margin-top:10px; }

如果你不這樣做一個額外的類它將保證金任何其他輸入附加您在整個網站上使用。

來源

2013-07-24 22:42:09

如上所述，這將是一個解決方案，但當標籤開始跨越更多的線條，那麼它不是一個足夠動態的解決方案，謝謝這個想法。 –

Twitter的引導 - 垂直對齊輸入與內部控制組

回答

相關問題