我有一个流星集合，它将数据提供给一个使用 bootstrap 样式的车把模板，如下所示：
<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;
}
我试图让两列在页面中居中。我似乎无法让这些列成为一个很好的有序网格。
任何人都可以帮忙吗？
提前致谢！