跨多行

Question

我正在尝试创建这样的布局：

http://jsfiddle.net/LLbnhb9v/

基本上，A和C是侧边栏项，B是主要内容：

我的标记如下：

<div class="container">
    <div class="col-sm-2">
        A
    </div>
    <div class="col-sm-8">
        B
    </div>
    <div class="col-sm-2">
        C
    </div>
</div>

这适用于移动设备，但桌面C位于B下方。如何在没有任何疯狂的css技巧的情况下使B（主要内容）“跨越”多行？

Answer 1

您需要让粉红色部分具有右拉类，绿色部分具有clearfix类。 http://jsfiddle.net/LLbnhb9v/19/

[ { id: 1, color: 'red', owner_id: 1, name: 'Alice' }, { id: 2, color: 'black', owner_id: 1, name: 'Alice' } ]

我也稍微改变了布局。第一级div应该只关心布局。如果你添加填充和边距和东西，那么他们可能有一些问题，并没有按预期工作。我把a b c和x类移到子元素上。