Bootstrap 布局混乱

Question

我知道Bootstrap首先是设计移动。我想知道仅 Bootstrap 的 CSS 类?

是否可以实现可能的布局

图 A 尺码 col-md 或更大

当屏幕为 col-sm 或 col-xs 时，转到 B 或 C。（2 种不同的解决方案）。

我正在为 A->B 和 A->C 寻找正确的 div 布局。

每个部分的高度是随机的，因为其中生成的内容是动态的。我在 div 中添加高度只是为了填充，但它们是动态的并且不能'未设置。

以下不工作...

Fiddle ... https://jsfiddle.net/s4jj30wf/

<div class="row">
    <div style="background:blue" class="col-xs-12 col-md-4">
        <div style="height:100px"></div>
    </div>
    <div style="background:yellow" class="col-md-8 col-xs-12">
        <div class="row">
            <div style="background:green" class="col-md-12 col-xs-12">
                <div style="height:20px"></div>
            </div>
            <div style="background:pink" class="col-md-12 col-xs-12">
                <div style="height:100px"></div>
            </div>
            <div style="background:red" class="col-md-12 col-xs-12">
                <div style="height:100px"></div>
            </div>
        </div>
    </div>
    <div style="background:orange" class="col-md-4 col-md-pull-4 col-xs-12">
        <div style="height:50px"></div>
    </div>
</div>

Answer 1

我认为您可能正在寻找 column ordering，在那里您可以 .push-md- 和 .pull-md-

Answer 2

文档中有一些元素流，除非绝对定位，否则不能随意混合它们。

仅使用 bootstrap 类，我认为唯一的方法是复制内容 - 您将根据屏幕尺寸在页面中包含所有 A、B 和 C显示你想要的那个 - 使用类 visible-xs, hidden-sm 等。但是复制内容通常不是明智的做法。

Answer 3

解决方案：根据列是静态高度还是动态高度，有两种方法。如果它们有静态高度，那么我们有一个纯粹的 css 解决方案，使用 float 和 clear 属性以及 margin-top 属性来实现这一点。

示例纯 css 具有固定的列高度：

http://codepen.io/Nasir_T/pen/ZBOgoe

如果高度不是固定的和动态的，那么我们需要使用jquery来调整margin-top 属性以动态消除未对齐2之间的差距基于 A->B 和 A->C 场景的元素。对于这个简单的解决方案，我们将使用默认的 jquery 和 modernizr js。

具有动态列高的示例 jQuery & css 解决方案：

http://codepen.io/Nasir_T/pen/VmjoPd

希望对您有所帮助。

Bootstrap 布局混乱

Bootstrap Layout Confusion

css

twitter-bootstrap-3

responsive