Twitter Bootstrap - 對齊標籤和文本輸入（建議的做法）

我做了fiddle，這基本上就是我用來登錄正在處理的應用程序的窗口。Twitter Bootstrap - 對齊標籤和文本輸入（建議的做法）

當控件在彼此頂部堆疊之前窗口屏幕尺寸減小時，標籤被輸入控件重疊。我可以簡單地向標籤添加更多跨度到解決此問題，但更多跨度與標籤將使輸入之間的差距太大。

我的解決方案（未在fiddle中完成）是將固定像素分配給標籤和父包裝以停止重疊以及對排水溝（間隙）有更多控制，但我認爲這不是最佳做法，並且代碼變得混亂。任何建議，以優雅的方式做我想要完成的事情？

我正在使用Bootstrap記錄模板UI，我的目標是充分利用Bootstrap並減少我的臨時解決方案。

<div class="row-fluid"> 
    <div class="span6 offset3"> 
     <div class="login_frame"> 
      <div style="text-align: center;"> 
       <h2>Title</h2> 
      </div> 
      <div class="row-fluid"> 
       <div class="span2"> 
        <label>Username</label> 
       </div> 
       <div class="span9"> 
        <input type="text" class="input-block-level"> 
       </div> 
      </div> 
      <div class="row-fluid"> 
       <button class="span3 offset8">Log in</button> 
      </div> 
     </div> 
    </div> 
</div>

來源

2013-07-09 Seong Lee

我使用的劍道UI與自舉和數據驗證不會由於某種原因表單元素的工作。 –

爲此，你必須消除引導的網格UI和應用自定義CSS吧...

由於電網的UI是一些什麼僅限於形式元素，你需要做的一些變化......

我演示： - http://jsfiddle.net/QagSy/7/

HTML： -

<div class="mt20"> 
       <div class="label_align"> 
        <label class="uname_align">Username</label> 
       </div> 
       <div class="input_align"> 
        <input type="text" class="input-block-level" /> 
       </div> 
      </div>

CSS-

.mt20 { 
    margin-top: 20px; position:relative; 
} 
.uname_align { 
    margin-top: 5px; 
} 
.label_align { position:absolute; width:100px; } 
.input_align { margin-left:100px; } 

@media (max-width:767px){ 
.label_align { position:static; width:auto; text-align:center; } 
.input_align { margin-left:0; } 
}

希望這對你的作品... 謝謝...

來源

2013-07-09 05:04:18 SaurabhLP

Twitter Bootstrap - 對齊標籤和文本輸入（建議的做法）

回答

相關問題