Question

我在Twitter Bootstrap中使用了2列流体布局。左列是主要内容（span10），右列是小部件的侧边栏（span2）。目前，在调整浏览器窗口大小时，Bootstrap会通过创建一个列来响应，最左边的部分位于顶部，最右边的部分位于底部。我反过来喜欢它。

这是我的html的要点：

<body>
  <div id="content" class="container-fluid">
    <div id="content-row-1" class="row-fluid">
      <div id="mainContainer" class="span10"> Lots of content goes here </div>
      <div id="sidebar" class="span2"> Widgets   </div>
    </div>  <!-- content-row-1 -->
  </div>  <!-- content -->
</body>

左窗口有mainContainer，宽窗口右边有窗口小部件，但窗口收缩时会将sidebar移到顶部吗？

Answer 1

在bootstrap 3中，这是通过网格列排序完成的（see bootstrap 3 documentation）

实施例

<div class="row">
   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

如果有足够的空间，这将显示较低的div后面的div。如果屏幕尺寸减小，则上限div将保持不变。

Answer 2

今天回答了一个类似于这个问题的问题，你可以看到它here，它基本上归结为通过将侧边栏浮动到右侧来补偿侧边栏的流量并补偿左侧边距。内容区域，然后使用@media查询重置侧边栏的浮动属性，以便再次使用引导程序样式表中的默认值来容纳侧边栏。

<强> CSS

body {
    padding-top: 60px;
    padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}

#sidebar {
    float:right;
}

#content {
    margin-left: 0;
}

@media (max-width: 767px) {
    #sidebar {
        float:none;
    }
}

以下是上一个问题的重做演示：fiddle，编辑here。

Answer 3

在问题解决后，我采用非常简单的方法来解决这个问题。不需要@media也不需要百分比：

将所需的div放在另一个div之前的移动设备页面顶部。在这种情况下，＃sidebar位于HTML代码中的#mainContainer之前
向#sidebar提供类右拉
向#mainContainer提供类拉动
将这两个div的margin-left设置为0

因此，您可以将右侧边栏放在桌面右侧，也可以放在移动设备顶部。

示例：

--- HTML 

<div id="content" class="container-fluid">
  <div id="content-row-1" class="row-fluid">
    <div id="sidebar" class="span2 pull-right"> Widgets   </div>
    <div id="mainContainer" class="span10 pull-left"> Lots of content goes here </div>
  </div>  <!-- content-row-1 -->
</div>  <!-- content -->

--- CSS

div#sidebar, div#mainContainer {
  margin-left: 0;
}

Answer 4

根据您的参数，只需反转html源顺序中的sidebar和mainContainer div以及每个float: right。类似于：http://jsfiddle.net/3g8Bt/。

Answer 5

我提出了一个超级简单的解决方案，似乎至少可以使用2列布局。只需为您的标记和一些简单的CSS创建一个新类。

HTML（从我的Drupal .tpl中拉出来）

<div class="row-fluid">
    <div class="span9 pull-right re-order">
        <?php print $content['content']; ?>
    </div>
    <div class="span3 re-order">
        <?php print $content['sidebar']; ?>
    </div>
</div>

CSS

.row-fluid .re-order {
    margin: 0;
}

.row-fluid [class*="span"]:last-child {
    margin-right: 2.7624309392265194%;
    margin-left: 0;
}

这可能会有所改进，但它确实有效。

Answer 6

接受的答案很有效。或者，当你需要在反引导位置出现几个html时，事情会很复杂。也可以通过创建重复的html-snips来解决它，并使用.visible-phone和.hidden-phone来控制它们的显示/隐藏。

<div class="row-fluid">
<div class="span12 visible-phone">
    <ul>
        <li><a href="">tab1</a></li>
        <li><a href="">tab2</a></li>
        <li><a href="">tab3</a></li>
        <li><a href="">tab4</a></li>

    </ul>
</div>
</div>

<div class="row-fluid">
<div class="span9">

      <p>
             Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
      </p>
</div>
<div class="span3 hidden-phone">
    <ul>
        <li><a href="">tab1</a></li>
        <li><a href="">tab2</a></li>
        <li><a href="">tab3</a></li>
        <li><a href="">tab4</a></li>
    </ul>
</div>
</div>

fiddle

在Twitter Bootstrap 2中，如何在缩小屏幕时让正确的列移动到顶部？

6 个答案:

HTML（从我的Drupal .tpl中拉出来）

CSS