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材质设计浮动标签重叠输入文字

回答

相关问题