Question

我无法弄清楚我的代码有什么问题。我是一个非常新的引导程序我的问题有点琐碎。我的一个领域不合适。我只尝试了一行而不是增加div大小而尝试了不同的路径我减少了它们，但它有完全相同的问题。（以全屏模式运行代码）。

请你帮帮我吧！

.row {
    background-color: yellow;
}

.col-sm-3, .col-sm-6 {
    border:solid 2px black;
}

div {
    height:200px;
}
.two-div {
    height:400px;
}
.three-div {
    height:600px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 three-div pull-left">Works</div>
            <div class="col-sm-6">Works</div>
            <div class="col-sm-3 two-div pull-right">Works</div>
        </div>
        <div class="row">
            <div class="col-sm-3 two-div">Works</div>
            <div class="col-sm-3 three-div">Works</div>
        </div>
        <div class="row">
            <div class="col-sm-3 two-div pull-right">Works</div>
        </div>
        <div class="row">
            <div class="col-sm-6">:(</div>
        </div>
    </div>
    </body>
</html>

Answer 1

在适当的列上使用一些嵌套和pull-right，您可以反转float:left并使其正常工作（虽然是黑客！）......

http://www.codeply.com/go/rgHEL6DW12

<div class="container">
    <div class="row">
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-4 three-div">works</div>
                <div class="col-sm-8">works</div>
                <div class="col-sm-4 three-div pull-right">works</div>
                <div class="col-sm-4 two-div pull-right">works</div>
                <div class="col-sm-8 pull-right">
                    ;-)
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="row">
                <div class="col-sm-12 two-div">works</div>
                <div class="col-sm-12 two-div">works</div>
            </div>
        </div>
    </div>
</div>

这样想想......

http://www.codeply.com/go/rgHEL6DW12

Answer 2

你不开心的笑脸盒已关闭，因为你为容器设置了不同的高度。我修改了你的代码来解释你如何使用BS网格系统。见评论。

['c', 'c', 'c', 'c', 'b', 'a']

.row {
    background-color: yellow;
}

.col-sm-3,.col-sm-6 {
    border:solid 2px black;
}
div { height:200px; }

Bootstrap 3合并行和列

2 个答案: