Zurb Foundation kullanarak% 50 /% 50 mobil sütunlar ve sabit aralıklı masaüstü sütunları nasıl yapılır?

Question

Bu masaüstünde tipik bir seçim paneli olabilir:

Zurb Vakfı bunu yapabilir

:

ve cep telefonu

? Bir yakalama, orta genişlik ve yukarı için, dinamik yerine 2 kolonun genişliğinin sabitlenmesi gerektiğini düşünüyorum. (Seçenek 2 arka plan şeffaf ve gösterilmeyeceği için uzun genişlik veya kısa genişliğe sahip olabilir. Önem, Seçenek 1, dikey ayırma çizgisi ve Seçenek 2) arasındaki sabit aralıktır.

onlar masaüstü ve mobil cihazlar için özelleştirilmiş olmasına rağmen, CodePen bazı istenilen davranışı koymak, ancak her iki olamaz:

Masaüstü: http://codepen.io/anon/pen/oxZpzg
Mobil: Mobil İçin http://codepen.io/anon/pen/KzWZwQ

:

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

ve bunun Masaüstü sabit aralığı için stil oluşturmanın bir yolu yoktur.

Şu anda masaüstü sürümünü düz CSS kullanarak ve sonra mobil sürümü stil oluşturmak için medya sorgusu kullanarak yapılandırabilir ve Zurb Foundation kullanılmaz. Vakıf hem mobil hem de masaüstü için kullanılabilir mi, yoksa Vakayı bir vaka için kullanabilir ve diğer dava için medya sorgusu kullanabilir mi?

Answer 1

Sadece SCSS'ye yazın, CSS'ye derleyin ve düz bir CSS kullanın.

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

Derleyen CSS: Bu SCSS kod hile yapabilirsiniz

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

Güncelleme HTML:

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

CodePen link