html - 如何使 3 列移动友好？

Question

我试图自己弄清楚，但对我来说效果不佳。我正在使用 Bootstrap 并尝试为移动用户制作合适的版本。现在它在移动设备上看起来很糟糕。我认为问题出在 div 类上，我试图更改它们，但对我帮助不大。

这是我的代码:

    <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 我怎样才能轻松地在移动设备上测试页面？

Answer 1

使用 Bootstrap 时，col-xs 类意味着该列及其内部的任何内容都将根据需要进行压缩，以适应手机上的内容。当您的台式机或笔记本电脑显示器上并排显示 3 列时，这是有道理的，因为这 3 列中的每一列都足够大，您可以阅读它。如果您的情况属于这种情况(我认为是)，请考虑将这些 col-xs 更改为 col-md 甚至 col-lg。这将导致列不会被挤压以适应移动屏幕，而是它们会堆叠在一起，这样您首先会看到最左边的列，然后向下滚动，您会看到中间的列，然后然后在下方，您会看到右栏。