Twitter Bootstrap-Div內容浮動在下面的div上方

Question

我的頁面布局如下：

[第1行第1行第2行]

[第2行第1列]

當我縮小瀏覽器窗口（即測試響應行為）時，我希望第1行將第2行向下推以為其內容騰出空間，如下所示：

[第1行第1行]

[第1行第2列]

[第2列上校]

問題是，當我縮小瀏覽器時，第2行保持固定，第1行第2列中的文本向下浮動到第2行的頂部。

有誰知道為什么會這樣嗎？ 據我所知，twitter引導div在斷點處垂直折疊是標准的。 我不這樣做。 我已經花了幾個小時閱讀並嘗試了幾件事（clearfix，重新排列div等），但無法弄清楚。

這是代碼：

在本節中，我有：

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

和身體：

<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類。 我正在使用最新版本的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之前放置<br />標簽。

Answer 2

您的.row清除了嗎？ 如果沒有，請嘗試此。

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

會以為它已經在bootStrap中，但是您永遠不會知道...

是的，這應該是一條評論，但我尚未達到50個代表。

Answer 3

===================================

更新資料

（我試圖將其添加到上面的我自己的問題中，但未登錄，因此該匿名帖子。對不起）。

感謝您的上述答復，他們提供了幫助。

我從Bootstrap CSS頁面復制並粘貼了示例代碼，然后將內容放入其中，但仍然存在相同的問題。 這將問題縮小到頁面標題。 在標題中，我在CSS文件中為標題div設置了背景圖像，如下所示：

.banner{
   background-image: url('../img/banner1.jpg');
   height: 250px;
}

我將CSS更改為：

.banner{
   background-image: url('../img/banner1.jpg');
   background-size: cover;
}

這可以在手機上使用，但不能在平板電腦上使用，因此我將col-xs- *更改為col-sm- *，現在一切正常。

謝謝大家。