引导跨度类未按预期工作答案

【问题标题】：Bootstrap span classes not working as expected引导跨度类未按预期工作
【发布时间】：2014-04-14 02:39:08
【问题描述】：

我编写了我的第一个引导程序。

<!DOCTYPE html>
<html>
    <head>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="row">
            <div class="span9">Level 1 of Column</div>
        </div>
        <div class="row">
            <div class="span6">Level 2</div>
            <div class="span3">Level 2</div>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </body>    
</html>

我希望 div 类 9 只占用 9 列而不是整个浏览器宽度。我希望 span6 和 span3 将占据 6 列和 3 列并且位于同一行。

但输出看起来像

所以行没有正确显示（它们被剪切），并且行和列也没有得到尊重。（在 chrome 中，我可以看到 1 级占用了整个浏览器宽度）2 span6 和 span3 类也是如此。它们占据了整个浏览器宽度。

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您在标头中引用了 bootstrap 3.1.1 css 文件，但您在 html 代码中使用了 bootstrap 2 css 类（例如span3）。

使用 bootstrap 3 类代替，如下所述： http://getbootstrap.com/css/

所以例如使用col-lg-3 而不是span3。

试试这个：

...
<div class="row">
    <div class="col-lg-9">Level 1 of Column</div>
</div>
<div class="row">
    <div class="col-lg-6">Level 2</div>
    <div class="col-lg-3">Level 2</div>
</div>
...

【讨论】：