Responsive CSS with Twitter Bootstrap

-1

在我的Rails應用程序中，我使用的是Twitter Bootstrap。我的頁腳正確顯示在具有足夠寬度的橫向模式的屏幕上。
下面是它的外觀：
Correctly displayed on browser on Mac Responsive CSS with Twitter Bootstrap

但是，對我的Android Galaxy Note的瀏覽器，它的出現打破。如果我在橫向模式下使用瀏覽器，則頁腳顯示正確，但在縱向模式下，頁腳會中斷。它看起來像：
Broken on browser on Android - small screen

這裏是我的代碼：

<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>

對於上述被借的CSS從Example - sticky-footer：

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

我不知道爲什麼它不會令它正確。我是新來的響應CSS和我正在學習。請讓我知道什麼是錯的。

來源

2013-08-19 Jatin Ganhotra

JSF好嗎？ –

看起來您的頁腳不適合您筆記的可用空間。那麼，您希望自己的設計如何應對更小的空間？ – KatieK

@KatieK：我希望隱私政策和服務條款在另一行的版權下方顯示。 –

它呈現完全正常。沒有足夠的空間讓內容適合放在一行上，因此它會出現在新行中。如果您希望鏈接不會像這樣分成兩行，並且始終放在一行上，請在錨標記上全局或根據您的選擇決議嘗試：white-space: nowrap;。

來源

2013-08-19 19:29:56 abpetkov

謝謝，它工作。 :) –

我也試圖增加頁腳的高度，但沒有成功。我試圖改變#footer高度，並相應地將#wrap邊距值設置爲負數。但是，它沒有奏效。我不知道如何解決這個問題，我只是使用Bootstrap上的一個例子。 –

您也可以嘗試將版權文本放在一個div中，並將鏈接放在另一個div中。在更大的分辨率下，你可以使用display：inline;在更小的display：block上顯示它們。這樣他們將永遠在不同的行上，不管他們的寬度。 – abpetkov

Responsive CSS with Twitter Bootstrap

回答

相關問題