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

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

Dies kann ein typisches Auswahlfeld auf dem Desktop sein:

Bildbeschreibung hier eingeben

und auf einem Handy:

Bildbeschreibung hier eingeben

Kann die Zurb-Stiftung 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 CodePen mit dem gewünschten Verhalten versehen, obwohl es für Desktop und Mobile angepasst ist, aber nicht beides sein kann:

Desktop: http://codepen.io/anon/pen/oxZpzg
Handy, Mobiltelefon: 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 verwendenplain CSS, und dann Medienabfrage verwenden, um die mobile Version zu stylen, und keine Zurb Foundation wird 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?

Antworten:

0 für die Antwort № 1

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

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

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

Aktualisiertes HTML:

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

CodePen-Verknüpfung