Question

以下是我正在使用的代码：

<!DOCTYPE html>

<html>

    <head>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
        <title>Column Test</title>
    </head>

    <body>
        <div class="container">
        <div class="row">
            <div class="col-md-2">a</div>
            <div class="col-md-2">b</div>
            <div class="col-md-2">c</div>
            <div class="col-md-2">d</div>
            <div class="col-md-2">e</div>
            <div class="col-md-2">f</div>
        </div>

        <div class="row">
            <div class="col-md-2">g</div>
            <div class="col-md-2">h</div>
            <div class="col-md-2">i</div>
            <div class="col-md-2">j</div>
            <div class="col-md-2">k</div>
            <div class="col-md-2">l</div>
        </div>
            </div>
    </body>

</html>

body标签内的代码来自某个网站，作为Bootstrap网格系统的一个例子。当它粘贴到w3school的自己编辑引导程序时，它可以正常工作。但是，当我尝试在Chrome中运行整个html文件时，行元素都垂直堆叠。在html文件的其他部分中，语法是否存在根本错误？或者有什么关于bootstrap的网格系统本身的语法我不知道吗？

大约一年前问了一个类似的问题：Columns in bootstrap 3.0 only stacking vertically 这个问题的单一答案与使用xs切换md有关，但我使用的是13英寸MacBook Pro，所以md应该可以解决问题。无论如何，我已经尝试过使用不同大小的col类，所以这显然不是问题。

Answer 1

使用span [#of columns]而不是col-md - [＃columns]。

使用引导网格系统的列保持垂直堆叠而不是一行堆叠

1 个答案: