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。这将导致列不被压扁以适应移动屏幕，而是它们将堆叠在彼此之上，以便您首先看到最左侧的列，然后向下滚动，您看到中间的那个，以及然后在下面，您会看到正确的列。

Answer 2

试试这个：

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

列在垂直移动设备上无效。你应该更喜欢行。

Answer 3

您正在使用Bootstrap的超小（xs）列大小。无论视口有多小，xs都会始终创建列。请尝试使用sm，md，lg代替，col-sm-4。

请参阅Bootstrap Grid Options。

您还可以为同一元素提供多个列类，以实现更多控制。例如，小型移动设备上的50％宽度列和较大设备上的33.333％宽度列，即<div class="col-xs-6 col-md-4">。

Answer 4

我想补充两件事，你可能想用col-sm-4替换col-xs-4 这样他们就不会局限于移动屏幕视图。其次你的列表项的i标签（小绿色箭头）使其位置绝对，这样当自动换行时它看起来并不奇怪。

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

如何使3列移动友好？

4 个答案: