bootstrap 2 个网格显示未按预期运行（span12...）

Question

我从 bootstrap 站点复制粘贴了示例代码，但没有得到预期的结果

改编自此处：查看源代码：http://getbootstrap.com/2.3.2/base-css.html#forms

My code is:
<!doctype html>
<html lang="en">
<head>
..................
</head>

<body>

<form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
    <div class="controls ">
        <input class="span12" type="text" placeholder=".span12">
    </div>
    <div class="controls controls-row span12">
        <input class="span4" type="text" placeholder=".span4"> 
        <input class="span8" type="text" placeholder=".span8">
    </div>
        <div class="controls controls-row span12">
        <input class="span9" type="text" placeholder=".span9"> 
        <input class="span3" type="text" placeholder=".span3">
    </div>
        </div>
        <div class="controls controls-row span12">
        <input class="span6" type="text" placeholder=".span6"> 
        <input class="span6" type="text" placeholder=".span6">
    </div>
</form>
...

</body>
</html>

如附件截图所示。

有3处不符合预期： - 尽管我设置了 span12 class，但网格显示在半屏上。 - 第 3 行应该是在第 2 行之后连接起来的 - 第二行起始位置比第一行起始位置靠右一点

感谢任何帮助澄清这一点。

顺便说一句，我必须坚持使用 bootstrap2，我无法将 bootstrap3 用于此项目。

Answer 1

试试这个

 
<!DOCTYPE html>
<html>
    <head>
        <title>The code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link media="all" type="text/css" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
    <body>
        <form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
            <div class="controls ">
                <input class="span12" type="text" placeholder=".span12">
            </div>
            <div class="controls controls-row span12">
                <input class="span4" type="text" placeholder=".span4"> 
                <input class="span8" type="text" placeholder=".span8">
            </div>
            <div class="controls controls-row span12">
                <input class="span9" type="text" placeholder=".span9"> 
                <input class="span3" type="text" placeholder=".span3">
            </div>
            <div class="controls controls-row span12">
                <input class="span6" type="text" placeholder=".span6"> 
                <input class="span6" type="text" placeholder=".span6">
            </div>
        </form>
    </body>
</html>

您在第 3 个以上有错误 div.span12

Answer 2

解决所有 3 个问题的正确格式实际上是：

<form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
    <div class="controls  ">
        <input class="span12" type="text" placeholder=".span12">
    </div>
    <div class="controls controls-row ">
        <input class="span4" type="text" placeholder=".span4"> 
        <input class="span8" type="text" placeholder=".span8">
    </div>
    <div class="controls controls-row ">
        <input class="span9" type="text" placeholder=".span9"> 
        <input class="span3" type="text" placeholder=".span3">
    </div>
    <div class="controls controls-row ">
        <input class="span6" type="text" placeholder=".span6"> 
        <input class="span6" type="text" placeholder=".span6">
    </div>
</form>

看起来是第 2、3 和 4 行的 div 中的 span12 标签造成了混乱。感谢大家的帮助。

bootstrap 2 个网格显示未按预期运行（span12...）

bootstrap 2 grid displaying not behaving as expected (span12...)

html

css

twitter-bootstrap

twitter-bootstrap-2