Css 基础揭示形式怪异问题

这是一个非常奇怪的问题。在展示表单上（点击“价格和保存我的购物清单”），我认为出于某种原因，文本框和下拉框被禁用。事实并非如此；然而，它只允许我点击控件最右边的按钮——我必须将下拉列表从“小”增加到“中”，才能与之交互。我不知道为什么会发生这种情况，甚至想不出谷歌应该做什么。所以我看了与基金会相关的一切都没有用。p> 这里是JSFIDLE，但尽管它在我的站点上工作，但在JSFIDLE上却不工作。如果您想看到它的运行，我将向您发送指向我的网站的链接：

这是模态形式，因为如果我链接到JSFIDLE，显然我必须包含代码：

  <form id="saveShoppingList" action="" method="POST" class="custom">
   <div class="small-12 columns">
     <div class="small-6 small-centered columns"><h4>Your Shopping List</h4></div>
     <div id="makemebold" class="large-4 columns"><!--label for="name"-->Name it: <!--/label--></div>
     <div class="small-8 columns"><input type="text" id="name" name="name" /></div>
     <div id="makemebold" class="small-4 columns"><!--label for="style"-->Style: <!--/label--></div>
     <div class="small-8 columns"><select id="beer_style"  class="medium"><? echo $style_opt ?></select></div>
     <div id="makemebold" class="large-4 columns">Keep Private:</div>
     <div class="small-3 left columns"><div class="switch tiny round"><input id="private" name="private" type="radio"><label for="private" onclick="Off">On</label><span></span></div></div>
   </div>

  <div class="row">
   <div class="small-6 large-centered columns">
     <button type="submit" class="button radius">Go</button>
     <button type="reset" class="button radius alert">Reset</button>
  </div>
  </form>

你的购物清单
命名为：
风格：
保密：
在…上
去
重置

您在使用基金会网格时遇到了一些主要问题。后续列的总和远远超过12列，列嵌套在其他列中，没有插入行。如果您仔细阅读并相应地重写代码，我打赌您的问题将得到解决。请特别注意标题为“无限嵌套网格”的部分

---

我还建议进行一些基本的改进，比如为表单标签使用

标签

元素，因为浏览器会知道如何更好地使用它们。当然还有语义。

发送链接，我来看看。非常感谢您的帮助！即使只是建议我重新阅读文档，因为我的布局非常不正确，也是非常有帮助的。我真的很高兴这是一个简单的解决办法：）