使用 Meteor 数据引导多列答案

【问题标题】：Bootstrap multiple columns with Meteor data使用 Meteor 数据引导多列
【发布时间】：2013-07-31 05:23:49
【问题描述】：

我有一个流星集合，它将数据提供给一个车把模板，该模板使用如下所示的引导程序设置样式：

<template name="myClasses">
    <div class='span12 margins-center'>
    {{#each classes}}
    {{>classInfo}}
    {{/each}}
</div>
</template>

<template name="classInfo">
    <div class='well well-small span4 class-grid-item'>
        <h3>Welcome to {{subject}}</h3>
        <h4>Grade {{grade}}, Period {{period}}</h4>
        <p>{{description}}</p>
        <button class='btn btn-primary start-lesson'>
            I'm ready! Let's get started!
        </button>
    </div>
</template>

我的 main.html 文件包含：

<head>
  <title>My Cool App</title>
</head>
<body>
  {{> header}}
  <div class="container-fluid fill-height no-padding">
    {{> meteorNotices}}
    <div id="main" class="row row-fluid center">
      {{renderPage}}
    </div>
  </div>
  {{> footer}}
</body>

这是我为这个块设置的样式：

.class-grid-item {
    position: relative;
    min-height: 190px !important;
    .start-lesson {
        position: absolute;
        bottom: 10px;
        right: 10px;
        left: 10px;
        margin: 0px;
    }
}

.class-grid-item h3 {
    line-height: 22px;
}

.class-grid-item h4 {
    // margin-top: -16px;
    border-top: 1px solid #ccc;
    font-weight: lighter;
}

.margins-center {
    margin-left: auto;
    margin-right: auto;
}

我试图让两列在页面中居中。我似乎无法让这些列成为一个很好的有序网格。

谁能帮忙？

提前致谢！

【问题讨论】：

标签： css twitter-bootstrap meteor handlebars.js

【解决方案1】：

.margins-center .span4:nth-child(3n + 4) {
    margin-left: 0px;
}

是允许网格布局的答案。

【讨论】：