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

名称
描述
鼻涕虫

---

提前谢谢

更新

translateY（）

value将在输入处于活动状态或聚焦状态时更改标签的位置。您可以操纵其值以设置所需的标签位置，也可以更改字体大小值

HTML:

---

我希望这对您有所帮助

如果您使用的是Angular2，则无需创建自定义指令即可完成此操作。在标签上做类似的事情

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

一些标签

我也有同样的问题，通过在元素上使用聚焦类解决了这个问题。如果您使用的是

vuejs

，则可以使用内联语句检查值是否已填充，然后调用

focused

class（使用

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>

名称

另外，这也可用于具有适当语法的其他框架

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

示例标签

---

来源：

Hi-这会减少重叠，但仍然重叠。之前我假设您正在使用。因为您正在使用。您先前的语法是正确的。您可以在JSFIDLE或codepen中复制您的问题。我已经创建了codepen示例，在那里一切都很好。检查代码笔此方法是否有效？由于某些原因，我的活动类不断从标签中删除。@Neve12ende12，它应该仍然有效。你只需要确保引导程序正在使用活动的css类。你是对的，我一定是做错了什么。在VueJS中，它类似于v-bind:class=“[name？active:”“]”这工作正常，我在vue中使用的是填充的，而不是聚焦的。

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

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