Question

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

<!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列并且将在同一行中。

但输出看起来像

enter image description here

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

Answer 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>
...

Bootstrap span类未按预期工作

1 个答案: