css - Bootstrap div对齐问题

Question

我在尝试在 Bootstrap 3 中对齐我的 div 时遇到问题。

这是我想要完成的:

我使用过拉和推，但我想我还不够好。

代码:

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3 blue">
            blue
        </div>
        <div class="col-md-3 col-md-pull-9 red">
            red
        </div>
        <div class="col-md-9 col-md-push-3 orange">
            orange
        </div>
        <div class="col-md-3 col-md-pull-9 green">
            green
        </div>
        <div class="col-md-3 col-md-pull-9 purple">
            purple
        </div>             
    </div>
</div>

http://jsfiddle.net/bva5z74w/1/

Answer 1

我在看这个是想看看是否有人会回答这个显而易见的问题:不要为此使用引导推拉。使用 float 权利，没有 float 。在最小宽度处，蓝色必须比红色高，除此之外我认为这会很顺利。

演示:http://jsbin.com/degeju/1/

CSS:

.blue {
    background: blue
}
.red {
    background: red
}
.orange {
    background: orange
}
.green {
    background: green
}
.purple {
    background: purple
}
.red,
.blue,
.green,
.orange,
.purple {
    height: 50px
}

@media (min-width:992px) { 
    .blue {
        height: 600px;
        float: right;
    }
    .red {
        height: 300px;
        float: none;
    }
    .orange {
        height: 400px;
        float: right;
    }
    .green {
        height: 200px;
        float: none;
    }
    .purple {
        height: 200px;
        float: none;
    }
}

HTML

<div class="container">
    <div class="row">
        <div class="col-md-9 blue">
            blue
        </div>
        <div class="col-md-3 red">
            red
        </div>
        <div class="col-md-9 orange">
            orange
        </div>
        <div class="col-md-3 green">
            green
        </div>
        <div class="col-md-3 purple">
            purple
        </div>             
    </div>
</div>