twitter-bootstrap - Bootstrap 材料设计浮动标签重叠输入文本

Question

我正在使用引导材料设计，当预先填充文本时，我的标签与我的输入文本重叠。（参考下面的屏幕截图）。有没有办法可以防止标签重叠？

我的代码：

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

我希望这可以帮助你

Answer 2

我有同样的问题，并通过在元素上使用重点类来解决。如果您正在使用vuejs，您可以使用 inline 语句检查值是否已填充，然后调用将为元素设置样式的focused类（使用）。v-bind:class

像这样的东西：

<div class="form-line"  v-bind:class="[name != null ? 'focused' : '']">
     <input type="text" class="form-control" v-model="name">
     <label class="form-label" >Name</label>
</div>

PS 这也可以用于具有适当语法的其他框架。

Answer 3

如果您使用的是 Angular2，那么您可以在不创建自定义指令的情况下执行此操作。在标签上做这样的事情。

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

Answer 4

<!-- Material input -->
<div class="md-form">
  <input value="John Doe" type="text" id="myid" class="form-control">
  <label for="myid">Example label</label>
</div>

来源：https ://mdbootstrap.com/docs/jquery/forms/inputs/