0

出于某种原因，当我使用引导程序 3 在表单中添加文本区域时，输入字段变得不可点击，但如果我将文本区域取出，它们似乎工作正常。

我的代码：

<div class="row">
<form class="form col-lg-12" role="form">
  <div class="col-lg-6">
    <label for="Name">Your Name:</label>
    <input type="email" class="form-control cntct" placeholder="Name" />
  </div>
  <div class="col-lg-6">
    <label for="Email">Your Email Address:</label>
    <input type="text" class="form-control cntct" placeholder="Email" />
  </div>
    <div class="col-lg-12">
        <label class="msg" for="Message">Your Message:</label>
            <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>
  <button type="submit" class="btn btn-cntct">Send Your Message</button>
</form>
</div>

非常感谢任何人的帮助。如果您需要实时查看链接，网址为http://themelux.com/dev/YouSale/，您可以查看页面底部的联系表。

谢谢 ：）

4

4 回答 4

0 
<form class="form col-lg-12">
  <div class="form-group col-lg-6">
    <label for="Name">Your Name:</label>
    <input type="email" class="form-control cntct" placeholder="Name">
  </div>
  <div class="form-group col-lg-6">
    <label for="Email">Your Email Address:</label>
    <input type="text" class="form-control cntct" placeholder="Email">
  </div>
    <div class="form-group" style="margin-left: 13px;margin-right: 13px;">
        <label class="msg" for="Message">Your Message:</label>
            <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>
  <button type="submit" class="btn btn-cntct">Send Your Message</button>
</form>
于 2013-10-31T01:00:19.000 回答
0

尝试给你的班级 col-lg-6 一个比 col-lg-12 更高的 z-index。

目前它们是重叠的。

.col-lg-6 {
    z-index:5;
}

.col-lg-12 {
     z-index:1;
}
于 2013-10-31T01:01:04.463 回答
0

包含文本区域的 div 位于包含文本输入的 div 之上。

你的 .col-lg-6 类是向左浮动的，你的 .col-lg-12 类不是这样重叠的。

添加一个浮点数：左；到 .col-lg-12 或者添加一个 clear:left; 到包含 textarea 的 div。

于 2013-10-31T01:12:30.617 回答
0

您应该将表单内容放在行内，在这种情况下，您的 textarea 将位于其自己的行上。不应该有任何需要弄乱列等的 css 来做到这一点，否则你可能想知道为什么你首先使用网格系统。

用代码更新：

<div class="row">
<form class="form col-lg-12" role="form">
  <div class="row">
      <div class="col-lg-6">
          <label for="Name">Your Name:</label>
          <input type="email" class="form-control cntct" placeholder="Name" />
      </div>
      <div class="col-lg-6">
          <label for="Email">Your Email Address:</label>
          <input type="text" class="form-control cntct" placeholder="Email" />
      </div>
   </div>
   <div class="row">
      <div class="col-lg-12">
          <label class="msg" for="Message">Your Message:</label>
          <textarea class="form-control" rows="5" placeholder="Message"></textarea>
      </div>
  </div>
  <div class="row">
      <div class="col-lg-12">
           <button type="submit" class="btn btn-cntct">Send Your Message</button>
      </div>
  </div>
</form>
</div>

这不是很好的标记（尽管它比以前更好），但那是适合您的网格系统。

于 2013-10-31T01:30:26.843 回答