html - 在移动设备中查看时，Bootstrap pull-right stack DIV

Question

考虑代码

<div class="container">

<div class="row">
  <div id="right" class="span4 pull-right"> right </div>
  <div class="span8"> left </div>
</div>

</div>

和 CSS

#left {
    background-color:red;
}

在移动设备或窄屏查看时，左DIV在右DIV下方（这很好），但背景颜色从右DIV开始，见附件

那么如何让红色背景只出现在底部呢？

jsfiddle：http: //jsfiddle.net/6F4dg/

Answer 1

#left {
    background-color:red;
}

#right {
    float: none;
    clear: both;
}

禁用浮动并清除两者，#right将在顶部和#left底部以红色背景显示。

Answer 2

您不能将 div 分开并尝试一下。

<div class="container">
    <div class="row">
        <div class="pull-right">
            <div id="right" class="span4">right</div>
        </div>
        <div class="pull-left">
            <div id="left" class="span8">left</div>
        </div>
    </div>
</div>

jsfiddle：更新的代码

Answer 3

您正在使用 Bootstrap 2 类，我建议您将项目升级到 Bootstrap 3。它具有适用于各种显示尺寸的网格类，并允许您根据显示尺寸指定列的行为方式。

所以你可以做这样的事情（Demo here）：

<div class="container">
  <div class="row">
    <div id="right" class="col-xs-4 col-lg-4">right</div>
    <div id="left" class="col-xs-8 col-lg-8">left </div>
  </div>
</div>

Where col-lg-8and col-lg-4are for desktop和 col-xs-8and col-xs-4are for small devices

有关详细信息，请参阅http://getbootstrap.com/css/#grid。