Usuń margines na kolumnach rozpiętości z Bourbon Neat

Question

Zaczynam używać Thoughtbot za Bourbon Neat dla reagujących siatek. Ogólnie rzecz biorąc, jest całkiem sprytny i bardzo mi się podoba, ale jestem zawieszony na jednym małym problemie.

Próbuję uzyskać dwie kolumny do siebie obok siebie bez marginesów, ale po próbie replikacji ich przykładów z ich przykładów, nie otrzymuję tego samego wyniku.

Oto HTML próbki:

<section> 
    <p> 
     This is the main section. 
    </p> 

    <div class="container"> 
     <p> 
      This is the container 
     </p> 

     <div class="col1"> 
      <p> 
       This is the 1st column. 
      </p> 
     </div> 

     <div class="col2"> 
      <p> 
       This is the 2nd column. 
      </p> 
     </div> 

    </div> 
</section> 

Oto mój SCSS:

section { 
@include outer-container; 
text-align: center; 
} 

.container { 
@include span-columns (12); 
text-align: center; 
margin: 0; 
padding: 0; 


.col1 { 
    @include span-columns(6); 
    background: #ccc; 
    @include pad(em(15)); 
} 
.col2 { 
    @include span-columns(6); 
    background: #ccc; 
    @include pad(em(15)); 
} 

} 

która produkuje ten:

Ale gdy próbuję uzyskać dwie kolumny do nest/tyłek do siebie przy użyciu metody tabeli, jak pokazuje ich przykład, I ge t to:

SCSS:

section { 
@include outer-container; 
text-align: center; 
} 

.container { 
@include span-columns (12); 
@include row (table); 
text-align: center; 
margin: 0; 
padding: 0; 


.col1 { 
    @include span-columns(6); 
    background: #ccc; 
    @include pad(em(15)); 
} 
.col2 { 
    @include span-columns(6); 
    background: #ccc; 
    @include pad(em(15)); 
    @include reset-display; 
} 

} 

wyjściowa:

Jeśli pójdę trasę @include omega(); że działa, ale to nie rozszerza się na całą szerokość z ostatniej kolumny:

SCSS:

section { 
@include outer-container; 
text-align: center; 
} 

.container { 
@include span-columns (12); 
text-align: center; 
margin: 0; 
padding: 0; 


.col1 { 
    @include span-columns(6); 
    @include omega(); 
    background: #ccc; 
    @include pad(em(15)); 
} 
.col2 { 
    @include span-columns(6); 
    background: #ccc; 
    @include pad(em(15)); 
    @include omega(); 
} 

} 

wyjściowa:

Zasadniczo, może po prostu pominąć treść, która jest w pojemniku, który ma pewne co uzyskując wynik, który szukam . Ale jest to konieczne, aby utworzyć pusty div aby osiągnąć ?:

SCSS

section { 
@include outer-container; 
text-align: center; 
} 

.container { 
@include span-columns (12); 
@include row(table); 
text-align: center; 
margin: 0; 
padding: 0; 


.col1 { 
    @include span-columns(6); 
    background: #ccc; 
    @include pad(em(15)); 
} 
.col2 { 
    @include span-columns(6); 
    background: #ccc; 
    @include pad(em(15)); 
    @include reset-display 
} 

} 

HTML (zawartość w .container jest komentarzem):

<section> 
    <p> 
     This is the main section. 
    </p> 

    <div class="container"> 
     <!-- <p> 
      This is the container 
     </p> --> 

     <div class="col1"> 
      <p> 
       This is the 1st column. 
      </p> 
     </div> 

     <div class="col2"> 
      <p> 
       This is the 2nd column. 
      </p> 
     </div> 

    </div> 
</section> 

wyjściowa:

W każdym razie, nie wiem, jaki jest "właściwy" sposób osiągnięcia tego. Dokumentacja nie jest naprawdę specyficzna dla wyjaśnienia, w jaki sposób uzyskać dwie kolumny, aby zagnieździć się względem siebie. I z tego, co próbowałem powtórzyć w ich przykładzie, nie dało tego samego rezultatu.

O ile nie muszę dodawać konkretnie margin:0; w ostatniej kolumnie.

Answer 1

można zrobić coś takiego @include Span-kolumn (6 z 12, blok-zapadnięcia)

Answer 2

Nie po prostu zgubić swój p z treścią „To jest pojemnik”, tak, że przypadkowo służy aa table-cell, ale tak naprawdę chcesz, żeby znajdował się nad kontenerem?

Umieszczenie go powyżej .container i to działa:

<section> 
    <p> 
    This is the main section. 
    </p> 
    <p> 
    This is the container 
    </p> 
    <div class="container"> 
    <div class="col1"> 
     <p> 
     This is the 1st column. 
     </p> 
    </div> 

    <div class="col2"> 
     <p> 
     This is the 2nd column. 
     </p> 
    </div> 

    </div> 
</section> 

SCSS:

section { 
    @include outer-container; 
    text-align: center; 
} 

.container { 
    @include fill-parent; 
    @include row(table); 

    .col1 { 
    @include span-columns(6); 
    background: #ccc; 
    @include pad(em(15)); 
    } 
    .col2 { 
    @include span-columns(6); 
    background: #ccc; 
    @include pad(em(15)); 
    } 
} 

wyjściowa:

Answer 3

Można ustawić Span-kolumny() dla każdego następnie pojemnik na nieco mniej niż połowę siatki przesunięcie pozostałą wartość, którą wziął z każdego pojemnika i shift() każdy pojemnik z dala od lewej/prawej stronie tak:

html:

<div id="wrapper"> 
    <div id="1"></div> 
    <div id="2"></div> 
</div> 

Sass/SCCS:

#wrapper 
{ 
    #1 
    { 
     @include span-columns(5); 
     @shift(1); 
    } 
    #2 
    { 
     @span-columns(5); 
     @shift(-1); 
    } 


} 

lub może użyć wstawek kierunek-kontekstowe, aby przełączyć kierunek # 2 ...

Sass/SCCS:

#wrapper 
{ 
    #1 
    { 
     @include include span-columns(5); 
     @include shift(1); 
    } 

     @include direction-context(right-to-left) 
     { 
      #2 
      { 
       @include span-columns(5); 
       @include shift(-1); 
      } 
     } 

} 

Nie jestem pewien, czy jestem w 100% po twoim problemie, ale jeśli masz na myśli to, że nie możesz uzyskać lewej strony div po prawej stronie, dotknij prawej strony LEWEJ strony bezpośrednio w środku, niż wierzę w te 2 rozwiązania zadziała, jeśli grasz z nimi trochę ..

Daj mi znać jak to działa ~ gl!