Skeleton Boilerplate:柱子堆叠在一起，但我希望它们并排

Question

我正在使用Skeleton构建一个小型的单页网站。

我的设计分为左边5列，中间3列，右边4列。

因此，我开始在左侧添加前5列，在中间添加3列，在右侧添加4列，并使用CSS为它们提供黑色背景以查看效果。

结果是，这些列不是一个挨着一个堆叠的，它们是堆叠在一起的，宽度为960像素！

我认为Skeleton的全部原因是自动将列并排堆叠在盒子之外？

我是不是错过了什么？谢谢

标记：

<div class="container">
<div class="row">
      <div class="five-columns intro" style="margin-top: 25%">
    </div>
  </div>  
<div class="row">
      <div class="three-columns intro" style="margin-top: 25%">
    </div>
  </div>  
</div>
<div class="row">
      <div class="four-columns intro" style="margin-top: 25%">
    </div>
  </div>  
</div>

Answer 1

首先，一个div结束标记太多了。除此之外，您现在将所有的"xxx列"标记放在一个单独的行上，您需要将它们都放在单个"行"分区中。

像这样：

<div class="container">
    <div class="row">
        <div class="five-columns intro" style="margin-top: 25%">
        </div>
        <div class="three-columns intro" style="margin-top: 25%">
        </div>
        <div class="four-columns intro" style="margin-top: 25%">
        </div>
    </div>
</div>