twitter-bootstrap - Bootstrap Material design float 标签与输入文本重叠

Question

我正在使用 bootstrap material design，当文本被预填充时，我的标签与我的输入文本重叠。(引用下面我的屏幕截图)。有什么办法可以防止标签重叠？

我的代码:

<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>

提前致谢!

Answer 1

已更新

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%);
}

希望对你有帮助