Bootstrap材質設計浮動標籤重疊輸入文字

我使用的是引導材質設計，當文本預先填充時，我的標籤與我的輸入文本重疊..（參考下面的屏幕截圖）。有沒有辦法可以防止標籤重疊？Bootstrap材質設計浮動標籤重疊輸入文字

我的代碼：

<div className="modal-body"> 
    <div className="md-form"> 
     <input type="text" className="form-control" defaultValue={ project.name } ref="name"/> 
     <label>Name</label> 
    </div> 
    <div className="md-form"> 
     <input type="text" className="form-control" defaultValue={ project.description } ref="description"/> 
     <label>Description</label> 
    </div> 
    <div className="md-form"> 
     <input type="text" className="form-control" defaultValue={ project.slug } ref="slug"/> 
     <label>Slug</label> 
    </div> 
</div>

提前感謝！當輸入有效或聚焦

來源

2016-09-19 Trung Tran

更新

translateY()值將改變標籤的位置。您可以操縱其值以設置標籤的所需位置，並且還可以更改字體大小值。

HTML：

<div className="md-form">    
     <input type="text" className="form-control" defaultValue={ project.name } ref="name"/>  
     <label>Name</label>   
</div>

CSS：

.md-form label.active { 
    font-size: 0.8rem; 
    transform: translateY(-140%); 
}

我希望這有助於你

來源

2016-09-19 16:29:00

嗨 - 這會導致少一些重疊，但它仍然重疊.. –

早些時候，我假設你正在使用[fezvrasta材料設計庫（http://fezvrasta.github.io/bootstrap-material -設計/）。由於您正在使用[mdbootstrap]（http://mdbootstrap.com/components/forms/）。你之前的語法是正確的。你可以在jsfiddle或codepen中複製你的問題嗎？我已經創建了codepen示例，在那裏一切正常。檢查codepen ** [鏈接]（http://codepen.io/jpI/pen/QKKQpZ?editors=1100）** –

我也更新了我的答案.. –

如果您正在使用Angular2那麼你就可以創建出一個自定義的指令，做到這一點。在標籤上做這樣的事情。

<label [class.active]="name && name.length > 0">Some Label</label>

來源

2016-10-09 03:04:16 KevinM

這種方法甚至工作嗎？出於某種原因，我的活動類不斷從標籤中移除。 – Neve12ende12

@ Neve12ende12，它應該仍然有效。你只需要確保bootstrap使用活動的css類。 – KevinM

你是對的，我一定是做錯了。在VueJS中，它就像v-bind：class =「[name？active：'']」 – Neve12ende12

Bootstrap材質設計浮動標籤重疊輸入文字

回答

相關問題