Question

我的页面布局如下：

[ROW 1 Col 1 Col 2]

[ROW 2 Col 1]

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

[ROW 1 Col 1]

[ROW 1 Col 2]

[ROW 2 Col]

问题在于，当我缩小浏览器时，第2行保持固定，第1行第2列中的文本在第2行的顶部浮动。

有没有人知道为什么会这样？据我所知，这是twitter bootstrap 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;
}

然后放一个＆lt; br /＆gt;在Div 2之前标记。

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- *现在一切正常。

感谢所有人。

Twitter Bootstrap - Div内容浮动在div下方

3 个答案: