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>

按照附带的屏幕截图显示。

有三件事不符合预期： - 虽然我设置了span12类，但网格显示在半屏上。 - 第二行之后连接的第三行应该是什么？ - 第二行的起始位置位于第一行起始位置

的右侧

任何帮助都会得到澄清。

我必须坚持使用bootstrap2，我不能在这个项目中使用bootstrap3。

Answer 1

试试这个

＆＃13;

 
<!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>

＆＃13;

你有一个错误高于第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 ...）

2 个答案: