如何使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列移动友好？

回答

相关问题