手機上的Bootstrap聊天工具

Question

www.bestdealadvisors.com上的聊天工具在桌面上效果很好，但在移動設備上效果不錯。例如在iPhone上，只有一半的小部件被顯示並且不能摺疊。 有人可以告訴我需要在移動設備上正確顯示小部件的CSS嗎？

Answer 1

您應該使用媒體查詢來產生最佳結果。

您有聊天插件的以下元素：

<div class="chatcontainer"> 

它具有以下CSS樣式：

.chatcontainer { 
    display: inline-block; 
    width: 400px; 
    position: fixed; 
    left: 65%; 
    bottom: 0; 
} 

的left財產造成這裏在移動設備上的問題。使用媒體查詢，您可以覆蓋以下某些決議這個屬性：比如，你可以寫一個媒體查詢來改變它遵循以下768px：

.chatcontainer { 
    display: inline-block; 
    width: 400px; 
    position: fixed; 
    left: 65%; 
    bottom: 0; 
    @media (max-width: 768px) { 
     left: 10%; 
     right: 10%; 
    } 
} 

引導的主要概念是，雖然一些小部件可在網絡平臺上排成一排，每個小部件在移動設備上佔據整行。因此，聊天小部件應該佔據整行，而不會將其移到右側。

爲了更好的用戶體驗，首先應該隱藏聊天小部件，您可以在右下角放置一個扁平的圓形按鈕來打開小部件。

Answer 2

您可以使用引導程序。它提供自動形狀。您只需指定費率。它將場分爲12塊。例如.col-sm-4的意思是div有4/12的根標籤/字段的比率。