트위터 부트 스트랩이있는 반응 형 CSS

Question

내 Rails 앱에서 Twitter Bootstrap을 사용하고 있습니다. 내 바닥 글은 너비가 충분히 필요한 가로 모드가있는 화면에 제대로 표시됩니다. 여기
가 보이는 방법입니다 내 안드로이드 갤럭시 노트의 브라우저에

을하지만, 그것은 깨진 나타납니다. 브라우저를 가로 모드로 사용하면 바닥 글이 올바르게 나타나지만 세로 모드에서는 끊어집니다.

<div id="footer"> 
    <div class="container"> 
    <p class="muted credit" style="text-align: center" > 

     &copy; 2013 <a href="http://www.example.com">WebsiteName.com</a> All Rights Reserved. | 
     <a href="" title="Privacy Policy">Privacy Policy</a> |  
     <%= link_to 'Terms of Service', terms_of_service_path %> 

    </p> 
    </div> 
</div> 

Example - sticky-footer에서 위의 차용에 대한 CSS :

html, 
    body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
    } 

    /* Wrapper for page content to push down footer */ 
    #wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    width: 100%; 
    /* Negative indent footer by it's height */ 
    margin: 0 auto -60px; 
    position: fixed; 
    left:0; 
    top:0; 
    } 

    /* Set the fixed height of the footer here */ 
    #push, 
    #footer { 
    height: 60px; 
    } 
    #footer { 
    background-color: #f5f5f5; 
    } 

    /* Lastly, apply responsive CSS fixes as necessary */ 
    @media (max-width: 767px) { 
    #footer { 
     margin-left: -20px; 
     margin-right: -20px; 
     padding-left: 20px; 
     padding-right: 20px; 
    } 
    } 

    .container .credit { 
    margin: 20px 0; 
    } 

내가 모르는 이유는 렌더링하지 않습니다 여기에

내 코드입니다 : 것 같습니다 그것 올바르게. 저는 Responsive CSS에 익숙하지 않고 배우고 있습니다. 나에게 무엇이 잘못되었는지 알려주세요.

Answer 1

완벽하게 정상적으로 렌더링됩니다. 한 행에 내용이 들어갈 공간이 충분하지 않으므로 새로운 행이 만들어집니다. 링크를 이처럼 두 줄로 분리하지 않고 항상 한 행에 넣으려면 앵커 태그에 white-space: nowrap;을 사용하거나 전체적으로 또는 선택한대로 해결하십시오.