如何在Semantic UI中细分列？

Question

我希望能够在Semantic UI中细分一列。所以它看起来如下。我限制大的只有12列宽：

问题是，该列中的任何列都会作为新行被抛出。我怎样才能细分色谱柱，否则会达到这个效果？

JSFiddle：https://jsfiddle.net/b9j6etua/1/

HTML：

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

编辑：更新了JSFiddle，显示了其他问题：https://jsfiddle.net/b9j6etua/16/

我的目标是能够指定表格输入的列在表单内部。

Edit2：如果我的问题的前提基本上不正确（即"You shouldn't even be trying to subdivide columns, use this: instead"），请告诉我。我只能用我目前对Semantic UI的知识来解释我的问题。

我会将此标记为已回答并提出另一个更具体的问题。

Answer 1

这是一种适合你的方式吗？

以下是your fiddle，...

的更新

...这是一个代码段。

.column:not(.row):not(.grid):after {
  background-color: rgba(86, 61, 124, .01);
  -webkit-box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
  box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
  content: "";
  display: block;
  min-height: 50px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>

<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 four wide"> </div>
  </div>
  <div class="ui centered grid">  
    <div class="column six wide"> </div>
    <div class="column six wide"> </div>    
  </div>
  <div class="ui centered grid">    
    <div class="column five wide"> </div>
    <div class="column seven wide"> </div>
  </div>  
  <div class="ui centered grid">
    <div class="column ten wide"> </div>
    <div class="column two wide"> </div>
  </div>  
</div>