我有一个 meteor 集合，它将数据提供给 handlebars 模板，该模板使用 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>
这是我为这个 block 设置的样式:
.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;
}
我试图让两列在页面中居中。我似乎无法让列成为一个很好的有序网格。
有人能帮忙吗？
提前致谢!
最佳答案
.margins-center .span4:nth-child(3n + 4) {
margin-left: 0px;
}
是允许网格布局的答案。
关于css - 使用 Meteor 数据 Bootstrap 多列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17957612/