html - Twitter Bootstrap - Div 内容 float 在下面的 div 之上

Question

我的页面布局如下:

[第 1 列第 1 列第 2 列]

[第 2 行第 1 列]

当我缩小浏览器窗口(即测试响应行为)时，我希望第 1 行将第 2 行向下推为其内容腾出空间，如下所示:

[第 1 行第 1 列]

[第 1 行第 2 列]

[第 2 列]

问题是，当我缩小浏览器时，第 2 行保持固定，第 1 行第 2 列中的文本向下 float 到第 2 行的顶部。

有人知道为什么会这样吗？据我所知，twitter bootstrap div 在断点处垂直折叠是标准的。我的不这样做。我花了几个小时阅读并尝试了一些东西(clearfix、重新排列 div 等)，但无法弄清楚。

代码如下:

在我的部分中:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

和 body :

<div class="container">

    <!-- ROW 1 -->
    <div class="row"> 

        <!-- COL 1 -->
        <div class="col-md-8">           
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        </div>

        <!-- COL 2 -->
        <div class="col-md-4"> 
             <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis</p>
        </div>

    </div>

    <!-- ROW 2 -->
    <div class="row"> 

        <!-- COL 1 -->
        <div class='col-md-12'> 
            <h1> Another section</h1> 

            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti</p>
        </div>
    </div>

</div> <!-- end of Container -->

它可能正盯着我的脸，但我看不见。

非常感谢。

我被要求提供我的 CSS 类(class)。我使用的是最新版本的 Bootstrap 以及以下内容:

.row {
  margin-right: 0;
  margin-left: 0;
 background-color: #FFFFFF;
}

.container{
  border:1px solid #000000;
}

Answer 1

你能发布 CSS 类吗？我想你想要的可以使用 float 属性来实现。

尝试在 CSS 中添加类似这样的内容，看看它是否是您需要的

div.col-md-8 {
    width:50%;
}
div.col-md-4 {
    float:right;
}

然后在您的 Div 2 之前放置一个
标签。