Rimuovi margine sulle colonne span con Bourbon Neat

Question

Inizio a utilizzare il Bourbon Neat di Thoughtbot per le griglie reattive. Nel complesso, è piuttosto lucido e mi piace molto, ma sono bloccato da un piccolo problema.

Sto cercando di mettere due colonne una accanto all'altra senza margini, ma dopo aver provato a replicare ciò che hanno dai loro esempi, non otterrò lo stesso risultato.

Ecco il codice HTML di esempio:

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

Ecco la mia 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)); 
} 

} 

che produce questo:

Ma quando provo ad ottenere le due colonne a nidificare/incastrarsi l'un l'altro usando il metodo tabella come mostra il loro esempio, I ge t questo:

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; 
} 

} 

uscita:

Se vado via @include omega(); che funziona, ma poi non si espande l'intera larghezza dell'ultima colonna:

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(); 
} 

} 

uscita:

In sostanza, ho potuto solo omettere il contenuto che si trova nella sezione di contenitore che fa un po 'quello che cede il risultato che sto cercando . Ma è quello necessario per creare un vuoto div al fine di ottenere che ?:

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 (contenuto nella .container sia commentata):

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

Uscita:

Ad ogni modo, non so quale sia il modo "corretto" per raggiungere questo obiettivo. La documentazione non è propriamente specifica per spiegare come fare per ottenere due colonne da accatastare l'una contro l'altra. E da quello che ho cercato di replicare nel loro esempio non ha prodotto lo stesso risultato.

A meno che non sia necessario aggiungere specificamente uno margin:0; sull'ultima colonna.

Answer 1

Si può fare qualcosa di simile @include campata colonne (6 su 12, block-collasso)

Answer 2

Non è sufficiente smarrimento tua p con contenuti "Questo è il contenitore", in modo che accidentalmente viene utilizzato una tabella-cella ma in realtà vuoi che sia sopra il contenitore?

Posizionamento sopra .container e funziona:

<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)); 
    } 
} 

uscita:

Answer 3

È possibile impostare i campata-colonne() per ogni contenitore per un po 'meno della metà della griglia ciascuno, quindi spostare il valore residuo che hai preso da ciascun contenitore e lo spostamento() ogni contenitore lontano dalle/lati destro e sinistro in questo modo:

html:

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

Sass/CSSC:

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


} 

o magari utilizzare il mixin direzione contesto per cambiare la direzione di 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); 
      } 
     } 

} 

Non sono sicuro che sto seguendo al 100% il tuo problema, ma se intendi che non puoi ottenere il lato destro del div sinistro per toccare il lato sinistro del div destro direttamente nel mezzo, allora credo che queste 2 soluzioni funzionerà se giocherete un po 'con loro ..

Fammi sapere come funziona ~ gl!