Wie macht man 50%/50% mobile Säulen und Fixed-Spacing-Desktop-Säulen mit Zurb Foundation?

Question

Dies kann eine typische Auswahl-Panel, das auf dem Desktop sein:

und auf einem Mobiltelefon:

Kann ZURB Foundation dies tun? Ich denke, ein Haken ist, für mittlere Breite und höher, die Breite der 2 Spalten soll statt dynamisch festgelegt werden. (Auswahl 2 kann lange Breite oder kurze Breite haben, da der Hintergrund transparent ist und nicht angezeigt wird. Die Wichtigkeit ist der feste Abstand zwischen Auswahl 1, der vertikalen Trennlinie und Auswahl 2).

Ich habe einige gewünschte Verhalten auf CodePen, obwohl sie für Desktop- und mobile angepasst werden, aber nicht beides sein kann:

Desktop: http://codepen.io/anon/pen/oxZpzg
Mobil: http://codepen.io/anon/pen/KzWZwQ

Für mobile:

<div class="row text-center"> 
    <div class="small-6 column">Choice 1</div> 
    <div class="small-6 column">Choice 2</div> 
</div> 

und es scheint keine Möglichkeit, es für Desktops festen Abstand zu stylen.

Im Moment kann ich die Desktop-Version mit Klar CSS-Stil, und dann verwendet, Medienabfrage stylen der mobilen Version und keine ZURB Foundation verwendet. Könnte Foundation sowohl für Mobilgeräte als auch für Desktops verwendet werden, oder Foundation für einen Fall und Medienabfrage für den anderen Fall verwenden?

Answer 1

Schreiben Sie es einfach in SCSS, kompilieren Sie es in CSS und verwenden Sie ein einfaches CSS. Dieser SCSS Code kann den Trick:

.column { 
    background: #ffc; 
    color: #333; 
    padding: 20px; 

    @media #{$small-only} { 
    width: 50%; 
    } 

    &:first-child { 
    border-right: 1px solid #bbb; 

    @media #{$medium-up} { 
     width: 200px; 
    } 
    } 

    &:last-child { 
    @media #{$medium-up} { 
     width: calc(100% - 200px); 
    } 
    } 
} 

Zusammengestellt CSS:

body { 
    padding-top: 50px; 
} 

.column { 
    background: #ffc; 
    color: #333; 
    padding: 20px; 
} 

@media only screen and (max-width: 40em) { 
    .column { 
    width: 50%; 
    } 
} 

.column:first-child { 
    border-right: 1px solid #bbb; 
} 

@media only screen and (min-width: 40.0625em) { 
    .column:first-child { 
    width: 200px; 
    } 
} 

@media only screen and (min-width: 40.0625em) { 
    .column:last-child { 
    width: calc(100% - 200px); 
    } 
} 

Aktualisiert HTML:

<div class="row text-center"> 
    <div class="column">Choice 1</div> 
    <div class="column">Choice 2</div> 
</div> 

CodePen link