如何细分语义 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"），请告诉我。我只能用我目前对语义的了解来解释我的问题 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>

如何细分语义 UI 中的列？

How can I subdivide a column in Semantic UI?

html

css

semantic-ui