请帮忙。
我正在使用Bourbon Neat 1.7并试图添加并显示第二行。 当前显示的所有信息显示在一行上,应为2行。 我的计划是附加一个记录集并逐行显示记录。
我的scss代码
.third {
@include outer-container;
background-color: #afa;
.alpha3 {
@include fill-parent();
@include row(table);
margin-bottom: 0;
padding: 0;
background-color: #aaf;
.aside3 {
@include span-columns(4);
@include pad();
border: 1px solid black;
background-color: #faa;
}
.article3 {
@include span-columns(8);
@include pad();
@include reset-display;
background-color: #faa;
}
}
}
HTML代码
<div class="third">
<p>div class third </p>
<div class ="alpha3">
<div class ="aside3">
<p>1st Col 1st row </p>
</div>
<div class ="article3">
<p>2nd Col 1st row</p>
</div>
<div class ="aside3">
<p>1st Col 2nd row</p>
</div>
<div class ="article3">
<p>2nd Col 2nd row</p>
</div>
</div>
</div>
答案 0 :(得分:0)
在table
显示中,row元素变为一个表(在本例中为.alpha3
),有效地尝试使其所有子节点都不包装(表不包装)。
您应该创建一个额外的.alpha3
元素来托管第二行。
<div class="third">
<p>div class third</p>
<div class ="alpha3">
<div class ="aside3"><p>1st Col 1st row </p></div>
<div class ="article3"><p>2nd Col 1st row</p></div>
</div>
<div class ="alpha3">
<div class ="aside3"><p>1st Col 2nd row </p></div>
<div class ="article3"><p>2nd Col 2nd row</p></div>
</div>
</div>