Question

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

我的代码：

<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/，您可以在页面底部查看联系表单。

谢谢：）

Answer 1

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

Answer 2

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

目前他们正在重叠。

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

.col-lg-12 {
     z-index:1;
}

Answer 3

包含文本区域的div位于包含文本输入的div的顶部。

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

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

Answer 4

您应该将表单内容放在行中，在这种情况下，您的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>

这不是很好的标记（虽然它比以前更好），但这是你的网格系统。

输入字段无法在表单中使用textarea进行单击。 Bootstrap 3

4 个答案: