Bourbon/Neat Grid 2.0 시프트 문제

Question

화면 크기에 따라 다른 영역으로 열을 푸시하려는 사용자 정의 그리드 그리드 2.0 그리드가 있습니다. 예를 들어 모바일에서는 바닥 글 제출이 1 위가됩니다. 바탕 화면에서 화면의 맨 오른쪽으로 밀었습니다. 내가 계산 한 것을 제외하고 예상대로 작동하는 것은 약간 꺼져있을 수 있습니다. 그러나 나는 아직도이 그리드가 매달려 있기 때문에 이상하게 구현하고있다.

$no-gutter-grid: (
    columns: 12, 
    gutter: 0, 
); 

footer { 
    @include grid-container; 
} 

.footer-nav { 
    @include grid-column(12, $no-gutter-grid); 
    @include grid-media($grid-tablet-up) { 
    @include grid-column(10, $no-gutter-grid); 
    @include grid-shift(-2); 
    } 
    color: $white; 
    nav { 
    margin-bottom: 25px; 
    } 
} 

.footer-submit { 
    @include grid-column(12, $no-gutter-grid); 
    @include grid-media($grid-tablet-up) { 
    @include grid-column(2, $no-gutter-grid); 
    @include grid-shift(10); 
    } 
} 

그리고 내 HTML :

<footer> 
    <div class="newsletter"> 
    <div> 
     <p>Subscribe to our newsletter</p> 
     <input type="text" placeholder="Name" /> 
     <input type="email" placeholder="Email" /> 
     <button class="button-black" type="submit">Sign Up</button> 
    </div> 
    </div> 
    <div class="footer"> 
    <div class="footer-submit"> 
     <a href="#" class="button-orange">Submit A Story</a> 
    </div> 
    <div class="footer-nav"> 
     <nav> 
     <a href="/" class="logo-link"><img class="logo" src="{% static 'img/SAHARA_LOGO_OFFICIALS_WHITE.png' %}"></a> 
     <!--TODO change to dynamic links--> 
     <a href="#">About</a> 
     <a href="#">Contact Us</a> 
     <a href="#">Careers</a> 
     <a href="#">Support Us</a> 
     <a href="#">Advertise</a> 
     <a href="#">NewsSources</a> 
     </nav> 
     <div class="legal"> 
     <p>&#169;Copyright 2017 Sahara Reporters, Inc. All Rights Reserved.</p> 
     <span> 
      <a href="#">Privacy Policiy</a>/
      <a href="#">Terms of Use</a> 
     </span> 


     </div> 
    </div> 

    </div> 
</footer> 

Answer 1

이 이해가 있는지 확인하려면이, 당신은 제출 버튼은 바탕 화면에있는 동안 탐색 위에 쌓인있다. 사용자가 타블렛을 때면 제출 버튼이 탐색의 오른쪽에있게됩니다.

그런 경우 사용자 정의 격자에서 direction 속성을 사용하려고합니다. 그것은 다음과 같이 보일 것입니다 :

$no-gutter-grid_tablet: (
    columns: 12, 
    gutter: 0, 
    direction: rtl, 
); 

$no-gutter-grid: (
    columns: 12, 
    gutter: 0, 
); 

footer { 
    @include grid-container; 
} 

.footer-nav { 
    @include grid-column(12, $no-gutter-grid); 
    @include grid-media($grid-tablet-up) { 
    @include grid-column(10, $no-gutter-grid_tablet); 
    } 
    color: $white; 
    nav { 
    margin-bottom: 25px; 
    } 
} 

.footer-submit { 
    @include grid-column(12, $no-gutter-grid); 
    @include grid-media($grid-tablet-up) { 
    @include grid-column(2, $no-gutter-grid_tablet); 
    } 
} 

을 이제 당신이 무엇을 이동해야 그나마 오른쪽 또는 왼쪽으로 가고있다. 대신 div가 표시되는 순서를 뒤집을 것입니다.

희망이 도움이됩니다.