Question

我的两个列布局叠加在一起，而不是并排坐着。

任何人都可以帮助我吗？

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                <div class="span8">
                    <img src="img/banner-cat.png" />
                </div>
            </div>
            <div class="row-fluid">
                <div class="span4">
                    <form class="form">
                        <label for="name" class="col-sm-2 control-label"></label>
                        <input type="text" class="form-control" placeholder=" First Name">
                        <label for="name" class="col-sm-2 control-label"></label>
                        <input type="text" class="form-control" placeholder=" Last Name">
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

你有一堆不必要的div：

<body>
    <div class="row-fluid">
        <div class="span8">
            <img src="img/banner-cat.png" />
        </div>
        <div class="span4">
            <form class="form">
                <label for="name" class="col-sm-2 control-label"></label>
                <input type="text" class="form-control" placeholder=" First Name">
                <label for="name" class="col-sm-2 control-label"></label>
                <input type="text" class="form-control" placeholder=" Last Name">
            </form>
        </div>
    </div>
</body>

基本上，连续的任何内容都必须位于同一个row或row-fluid容器中。文档中包含了这一点：http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

为什么这些堆叠在另一个Bootstrap Span之上

1 个答案: