Html 如何在语义UI中细分列？

我希望能够在语义UI中细分列。因此，它将如下所示。其中，我限制了大图仅为12列宽：

问题是，该列中的任何列都会作为新行抛出到它下面。如何细分列，或者以其他方式实现此效果

JSFiddle：

HTML:

编辑：更新的JSFIDLE显示其他问题：

我的最终目标是能够指定表单输入位于表单内部的列

Edit2：如果我的问题的前提是根本不正确的（例如，

“您甚至不应该尝试细分列，请使用这个：”

）请告诉我。我只能用我目前掌握的语义UI知识来解释我的问题

---

我会将此标记为已回答，然后问另一个更具体的问题。

这是一种适合您的方法吗

这是…的更新

。。。下面是一段代码片段

。列：非（.row）：非（.grid）：之后{
背景色：rgba（86,61,124,01）；
-webkit盒阴影：0px 0px 0px 1px rgba（86,61,124,0.2）插图；
盒影：0px 0px 0px 1px rgba（86,61,124,0.2）插图；
内容：“；
显示：块；
最小高度：50px；
}

我相信这会的，我会尝试一下，如果这能满足我的需要，我会把它标记为答案。非常感谢。遗憾的是，这不起作用。我仍然需要指定一列来使用表单和附加消息。当我尝试在网格中使用附加的消息时，结果并不是这样。感谢LGSon，jsfiddle的#16示例旨在表明在列之外它没有对齐。我希望能够在表单中列项目，这意味着我需要能够细分14宽列的内部，或者利用其他内容。我也不能在

文本容器中使用列。我希望这能为你澄清我的问题。我可能只是想用一种完全错误的方式来解释这个问题。@douglasg14b当我的答案解决了你所问的初始布局时，最好接受这个问题，然后创建并发布一个带有“表单项目”列的新问题，我们可以提供帮助。
<div class="ui container">
  <div class="ui centered grid">
    <div class="column four wide"> </div>
    <div class="column four wide"> </div>
    <div class="column four wide"> </div>
    <div class="column twelve wide">
      <div class="column six wide"> </div>
      <div class="column three wide"> </div>
      <div class="column four wide"> </div>
      <div class="column six wide"> </div>
    </div>
  </div>
</div>