Question

这只是一个例子，可以理解为什么脚本没有以正确的方式对齐。错误的部分在哪里？

以下是代码：

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="row">
        <div class="col-md-4">
            <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
            <h3>Cloud Computable</h3>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
        </div>
        <div class="col-md-4">
            <span class="glyphicon glyphicon-console" aria-hidden="true"></span>
            <h3>GUI Free</h3>
            <p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
        </div>
        <div class="col-md-4">
            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
            <h3>Backwards Compatible</h3>
            <p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p>
        </div>
    </div>

提前致谢。

Answer 1

从你提供的代码片段中没有什么是错的。该片段正在完成您告诉div要做的事情。 'col'引用是指视图展开或缩小时div希望执行的操作。 Bootstrap使用网格系统view here来了解有关Bootstrap'col'用法的更多信息。

以下是您提供的代码段，但支持“col-xs，col-md和col-lg”，当视图缩小或展开时，它可以正常查看并对齐。 jsfiddle

如果有帮助，请告诉我。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div class="row">
        <div class="col-xs-4 col-md-2 col-lg-4">
            <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
            <h3>Cloud Computable</h3>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
        </div>
        <div class="col-xs-4 col-md-2 col-lg-4">
            <span class="glyphicon glyphicon-console" aria-hidden="true"></span>
            <h3>GUI Free</h3>
            <p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
        </div>
        <div class="col-xs-4 col-md-2 col-lg-4">
            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
            <h3>Backwards Compatible</h3>
            <p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p>
        </div>
    </div>

在对齐Bootstrap3中的脚本方面，这些代码有什么问题

1 个答案: