Javascript 这片空地是从哪里来的？

我没有写表单，但是css只有8行+引导表单控件，然后是javascript的一些类，但我无法理解为什么占位符文本位，或者实际上是它的父div，高度变为60px左右，顶部和底部只有15px的填充，然后占位符文本有一个空白。我已经通过了表单控制，没有适合高度的样式，所以我就是想不出来。如果你能看一下，那就太好了

这是联系人表单html和css，但我建议检查元素，因为css中没有答案：o

<section id="perform">
<div class="container-fluid apply">
   <div class="text-center row">
      <h1>Want to perform? Sign up here</h1>
   </div>
   <div class="row">
      <div class="col-lg-8 col-lg-offset-2">
         <form name="sentMessage" id="contactForm" novalidate>
            <div class="col-lg-4">
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Name</label>
                     <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Email</label>
                     <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Phone</label>
                     <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
            </div>
            <div class="col-lg-8">
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Message</label>
                     <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
            </div>
            <br>
            <div id="success"></div>
            <div class="row">
               <div class="form-group col-xs-12">
                  <button type="submit" class="btn btn-success btn-lg">Send</button>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>

您有隐藏标签（

opacity:0

）占用空间。实际上，

Opacity:0

隐藏元素（此处为标签），但保留空间。您可以使用

display:none

完全隐藏元素。 我希望这有帮助

您有隐藏标签（

不透明度：0

），它占用了空间。实际上，

Opacity:0

隐藏元素（此处为标签），但保留空间。您可以使用

display:none

完全隐藏元素。

---

我希望这有帮助

正如其他人所说，问题是由隐藏标签引起的。 如果您正在寻找快速解决方案，我会这样做：

在您的mystyles.css中，为.form控件添加上边距

.form-control {
    margin-top: -10px;
}

---

正如其他人所说，这个问题是由隐藏的标签引起的。 如果您正在寻找快速解决方案，我会这样做：

在您的mystyles.css中，为.form控件添加上边距

.form-control {
    margin-top: -10px;
}

---

应用以下更改

label {
  opacity: 1 !important;
  top:0 !important;
}
.floating-label-form-group input, .floating-label-form-group textarea {
  background: rgba(255, 255, 255, 0.54) none repeat scroll 0 0;
  border: 0 none;
  border-radius: 3px;
  box-shadow: none !important;
  color: #fff;
  font-size: 1.5em;
  padding-left: 5px;
  padding-right: 0;
  position: relative;
  resize: none;
  z-index: 1;
}
.form-control {
  color: #fff !important;
  line-height: 1.5;
}

---

应用以下更改

label {
  opacity: 1 !important;
  top:0 !important;
}
.floating-label-form-group input, .floating-label-form-group textarea {
  background: rgba(255, 255, 255, 0.54) none repeat scroll 0 0;
  border: 0 none;
  border-radius: 3px;
  box-shadow: none !important;
  color: #fff;
  font-size: 1.5em;
  padding-left: 5px;
  padding-right: 0;
  position: relative;
  resize: none;
  z-index: 1;
}
.form-control {
  color: #fff !important;
  line-height: 1.5;
}

---

看起来输入上方有隐藏标签，

opacity

设置为0，

z-index

设置为0看起来输入上方有隐藏标签，

opacity

设置为0，

z-index

设置为0谢谢，实际上，我已经放弃了让浮动标签工作，但一旦我意识到它们确实存在，但只是隐藏起来了，我就返回到其他一些js文件，找到了一个随机的ass部分，其中有一个家伙将java脚本放在了一个类更改的顶部位置更改中。所以非常感谢：谢谢你，我实际上已经放弃了让浮动标签工作，但一旦我意识到它们确实在那里，但只是隐藏了，我回到其他一些js文件，发现了一个随机的ass部分，在那里，这个家伙把java脚本放在了一个类更改的顶部位置更改中。所以非常感谢：D