Bourbon Neat@include行(表)函数

Question

请提供帮助。

我正在使用波旁尼1.7，并试图添加和显示第二排。当前显示的所有信息都显示在一行，应该是两行。我的计划是附加一个记录集并逐行显示这些记录。

我的scs代码

.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>

Answer 1

在table显示中，行元素变成了一个表（在本例中为.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>