Question

我是新来的，有一个问题。我已经阅读了bootstrap，并对网格布局有一些快速的问题。我得到的布局应该加起来为12，并且为了感受它而一直在捣乱它。我的第一段代码给了我预期的显示，代码和图片如下所示。编辑，显然我需要10个重复点来发布图像所以我不能提供图像，抱歉。

的CSS：

.c{
border-style: solid;
}
.r{
border-style: solid;
border-color: red;
}
.b{
border-style: solid;
border-color: #ffff00;
}

HTML：

<div class="container-fluid">
<div class="row r">
    <div class="col-md-6 c">
        this is a test

    </div>

    <div class="col-md-6 c">
        this is another test
        <br><br><br>
        test
    </div>
    <div class="col-md-6 c">
        <p>this is a test</p>

    </div>

    <div class="col-md-6 c">
        this is another test
        <br><br><br>
        test
    </div>
</div>
<div class="row r">
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
</div>

然而，通过将较大的列放在左侧稍微改变布局完全弄乱了布局：

HTML：

<div class="container-fluid">
<div class="row r">

    <div class="col-md-6 c">
        this is another test 1
        <br><br><br>
        test
    </div>

    <div class="col-md-6 c">
        this is a test 1

    </div>
<div class="row b">
    <div class="col-md-6 c">
        this is another test 2
        <br><br><br>
        test 2
    </div>
    <div class="col-md-6 c">
        <p>this is a test 2</p>

    </div>

</div>

</div>
<div class="row r">
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
</div>

我期望看到的是行b中的元素很好地放置在行r下面，如第一个例子中所示。有人可以向我解释为什么不是这样的吗？

感谢。

Answer 1

您忘记在第一行关闭div标签，请参阅评论

<div class="container-fluid">
<div class="row r">

    <div class="col-md-6 c">
        this is another test 1
        <br><br><br>
        test
    </div>

    <div class="col-md-6 c">
        this is a test 1

    </div>
</div> <!--missed end of row--->
<div class="row b">
    <div class="col-md-6 c">
        this is another test 2
        <br><br><br>
        test 2
    </div>
    <div class="col-md-6 c">
        <p>this is a test 2</p>

    </div>

</div>

</div>
<div class="row r">
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
</div>

Twitter-Bootstrap网格

1 个答案: