无法在.ui.page.grid中获得3个等宽列

Question

我真的很想在页面布局中获得3列。

我现在只使用语义CSS，而不是我自己的CSS。我只是试图围绕网格的东西。

这是我完整的正文内容：

    <div class="ui page grid">
      <header class="sixteen wide column">
        <div class="ui segment">Header text.</div>
      </header>
      <div class="ui divided grid">
        <div class="eight wide column">
          <div class="ui segment">Left text</div>
        </div>
        <div class="eight wide column">
          <div class="ui segment">Right text</div>
        </div>
      </div>
      <div class="ui three column grid">
        <div class="column">
          <div class="ui segment">1</div>
        </div>
        <div class="column">
          <div class="ui segment">2</div>
        </div>
        <div class="column">
          <div class="ui segment">3</div>
        </div>
      </div>
      <footer class="sixteen wide column">
        <div class="ui segment">Footer text.</div>
      </footer>
    </div>

我理解如何获得一个全宽的列 - 这很详细，但它有效。

我也可以使用.sixteen.wide.column元素获得2个半宽列。

但由于16不能被3分割，我试图用它来获得3列：

      <div class="ui three column grid">
        <div class="column">
          <div class="ui segment">1</div>
        </div>
        <div class="column">
          <div class="ui segment">2</div>
        </div>
        <div class="column">
          <div class="ui segment">3</div>
        </div>
      </div>

上述代码已从此文档页面中解除：http://semantic-ui.com/collections/grid.html

我明白了，唉：

似乎宽度问题来自这个CSS：

 .ui.grid > .column, .ui.grid > .row > .column {
   width: 6.25%;
 }

不，我需要在任何地方增加一个额外的课程，或者一些额外的标记吗？

非常感谢你！

Answer 1

你走了：

<div class="ui three column grid">
  <div class="column">
    Content
  </div>
  <div class="column">
    Content
  </div>
  <div class="column">
    Content
  </div>
</div>

Answer 2

我有类似的问题！

以这种方式完成：

    <div class="ui divided grid stackable">

        <div class="three column row">

         <div class="column wide"> 
          <p> Your stuff here </p>
         </div>

         <div class="column wide">
         <p> Your stuff here </p>
         </div>

         <div class="column wide">
          <p> Your stuff here </p>
         </div>

        </div>

   </div>