html - Bootstrap 3 float 布局

Question

我在创建相对简单的布局时遇到问题。我使用 Bootstrap 3 但不是必须的。

因此，HTML:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <p>a</p>
            <p>a</p>
        </div>
        <div class="col-md-8">
            <p>b</p>
        </div>
        <div class="col-md-4">
            <p>c</p>
        </div>
        <div class="col-md-8">
            <p>d</p>
            <p>d</p>
            <p>d</p>
        </div>
    </div>
</div>

为了视觉目的，CSS:

div.col-md-4, div.col-md-8 { border: 1px solid red; }

我希望在中等屏幕 (md) 上使用这种布局(无论它们的高度如何，它们之间没有空格):

A B
C D

在小屏幕 (sm) 上这种布局:

A
B
C
D

jsfiddle 链接:http://jsfiddle.net/HxZ35/2/

谢谢!

Answer 1

您正在寻找这样的东西吗？

http://jsfiddle.net/HxZ35/5/

<div class="container">
<div class="row">
    <div class="col-md-4">
        <p>a</p>
        <p>a</p>
    </div>
    <div class="col-md-8">
        <p>b</p>
    </div>
    <div class="col-md-4 a">
        <p>c</p>
    </div>
    <div class="col-md-8 d">
        <p>d</p>
        <p>d</p>
        <p>d</p>
    </div>
</div>

和CSS

div.col-md-4, div.col-md-8 { border: 1px solid red; }
.a {clear: left;}
.d{float: initial; overflow:hidden;}
@media all and (min-width: 992px) {
.pull-right-lg { float: right !important; } 
}