Bourbon Neat @include row (table) function

Question

Пожалуйста, помогите.

Я использую Bourbon Neat 1.7 и пытаюсь добавить и отобразить второй ряд. Вся информация, отображаемая в настоящее время на одной строке, должна быть 2 строки. Мой план состоит в том, чтобы прикрепить набор записей и отобразить записи по строкам.

Мой СКС код

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