如何使3列移動友好？

我試圖自己弄清楚，但對我來說效果不好。我正在使用bootstrap並試圖爲移動用戶製作正確的版本。現在它在移動設備上看起來很可怕。我覺得問題是與我正在嘗試改變它們的div類，但沒有多少幫助我。如何使3列移動友好？

這裏是我的代碼：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-4 content"> 
      <ul class="featuresBody"> 
       <li><i class="icofont icofont-simple-right"></i>Unlimited Domains & Subdomains</li> 
       <li><i class="icofont icofont-simple-right"></i>Ulimited Email Addresses</li> 
       <li><i class="icofont icofont-simple-right"></i>Unlimited Databases (MySQL)</li> 
       <li><i class="icofont icofont-simple-right"></i>Unlimited Bandwidth</li> 
       <li><i class="icofont icofont-simple-right"></i>SSH, sFTP/FTP acess</li> 
      </ul> 
     </div> 
     <div class="col-xs-4 content"> 
      <ul class="featuresBody"> 
       <li><i class="icofont icofont-simple-right"></i>PHP 5/7, Perl 5, Python, Zend, phpMyAdmin</li> 
       <li><i class="icofont icofont-simple-right"></i>One Click CMS Install</li> 
       <li><i class="icofont icofont-simple-right"></i>Cron Job Manager</li> 
       <li><i class="icofont icofont-simple-right"></i>SSL Certificate</li> 
       <li><i class="icofont icofont-simple-right"></i>POP3, IMAP, SMTP For E-Mail</li> 
      </ul> 
     </div> 
     <div class="col-xs-4 content"> 
      <ul class="featuresBody"> 
       <li><i class="icofont icofont-simple-right"></i>Daily Backups</li> 
       <li><i class="icofont icofont-simple-right"></i>Detailed Logs & Statistics</li> 
       <li><i class="icofont icofont-simple-right"></i>Protection From Viruses</li> 
       <li><i class="icofont icofont-simple-right"></i>Advanced DDoS Protection</li> 
       <li><i class="icofont icofont-simple-right"></i>24/7 Support</li> 
      </ul> 
     </div> 
    </div> 
</div>

謝謝！ P.S如何在移動設備上輕鬆測試頁面？

來源

2016-11-09 Mona

要快速預覽移動設備，並且如果您使用Google Chrome瀏覽器，請點按「F12」並點擊左上角像兩個重疊方塊（移動設備）的圖標。 – hungerstar

在Firefox上，按Ctrl + Shift + M可預覽移動設備 – RyanZim

只需選中並且開發人員工具擁有焦點時，Chrome上的快捷方式與Firefox相同，即「Ctrl + Shift + M」。 – hungerstar

當使用Bootstrap時，col-xs類意味着該列及其內部的任何內容都會根據需要壓扁以適應手機上的內容。當您的桌面或筆記本電腦上並排放置3列時，這很有意義，因爲3列中的每一列都足夠大以供您閱讀。如果您的情況屬於這種情況（我認爲這種情況），請考慮將這些col-xs更改爲col-md甚至col-lg。這將導致列不會被擠壓以適應移動屏幕，但相反，它們將堆疊在彼此頂部，以便您首先看到最左側的列，然後向下滾動，您會看到中間的列，然後然後在下面，你會看到右欄。

來源

2016-11-09 20:28:14 borbesaur

非常感謝！ col-md完美無缺！ – Mona

試試這個：

<div class="col-sm-12 col-md-4 content">

列不上垂直移動設備上很好地工作。你應該更喜歡行。

來源

2016-11-09 20:29:40 lekiert

您正在使用Bootstrap的超小（xs）列大小。無論視口有多小，xs將始終創建列。嘗試使用sm,md,lg，即col-sm-4。

請參閱Bootstrap Grid Options。

您還可以將多個列類提供給相同的元素以進行更多控制。例如，小型手機上的寬度爲50％，大型設備上的寬度爲33.333％，即<div class="col-xs-6 col-md-4">。

來源

2016-11-09 20:29:57 hungerstar

是啊！它的工作原理，謝謝！ – Mona

我想補充的兩件事情，你可能想用col-sm-4 來代替col-xs-4，這樣他們就不會受到移動屏幕視圖的限制。其次你的我的標籤列表項目（小綠箭頭）使其位置絕對，這樣的話，當這個詞包裝發生時，它看起來不奇怪。

.featuresBody > li i.icofont-simple-right { 
    left: 10px; 
    position: absolute; 
    top: 10px; 
} 
.featuresBody > li { 
    position: relative; 
}

來源

2016-11-09 20:30:57

如何使3列移動友好？

回答

相關問題