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

我正在看这个，看看是否有人会回答这个显而易见的问题：不要为此使用引导程序推拉。使用正确的浮动并且没有浮动。蓝色必须在最小宽度上高于红色，除此之外我认为这会顺利进行。

演示：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>  

Answer 2

您拥有的 HTML 将完美运行，只需删除pull紫色块上的 ：

HTML：

<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 purple">
            purple
        </div>             
    </div>
</div>

http://www.bootply.com/dMNG75tSf0

编辑：

float左侧的元素导致它们折叠以适应其内容。但是，通过媒体查询，您可以将高度设置为与相邻右侧元素的高度相同。

@media (max-width:1199px) {
    .red {
        height: 360px;
    }
}
@media (min-width:1200px) {
    .red {
        height: 300px;
    }
}

明显的缺点是这限制了对支持媒体查询的浏览器的修复。因此，克里斯蒂娜的答案更好，假设它在浏览器中始终如一地工作。

Answer 3

div 有一个显示类型“block”，默认情况下，这意味着每个 div 将显示在另一个 div 下方。

这意味着您以某种方式更改了一些 css，特别是使用浮动或显示：内联。

如果您不确定如何查找和更改它，您始终可以确保每个 div 具有宽度：100%；

这将确保 div 捕获其父容器的整个宽度。