Bootstrap 材料设计浮动标签重叠输入文本答案

【问题标题】：Bootstrap Material design floating labels overlap input textBootstrap 材料设计浮动标签重叠输入文本
【发布时间】：2017-01-27 09:51:33
【问题描述】：

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

我的代码：

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

提前致谢！

【问题讨论】：

标签： twitter-bootstrap material-design mdbootstrap

【解决方案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%);
}

希望对你有帮助

【讨论】：

嗨 - 这会减少一点重叠，但它仍然重叠..
之前我假设您使用的是fezvrasta material design library。由于您使用的是mdbootstrap。您之前的语法是正确的。您可以在 jsfiddle 或 codepen 中复制您的问题吗？我已经创建了 codepen 示例，那里一切正常。检查codepen link

【解决方案2】：

我有同样的问题，并通过在元素上使用重点类来解决。如果您使用vuejs，您可以使用内联语句检查该值是否已填充，然后调用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>

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

【讨论】：

这很好用，我在 vue 中使用 is-fill 而不是 focus。

【解决方案3】：

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

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

【讨论】：

这种方法还能用吗？出于某种原因，我的活动课程不断从标签中删除。
@Neve12ende12，它应该仍然有效。您只需要确保引导程序正在使用活动的 css 类。
你是对的，我一定是做错了什么。在 VueJS 中类似于 v-bind:class="[name ? active: '']"

【解决方案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/

【讨论】：