Html 在 Twitter Bootstrap 2 中，如何在缩小屏幕时使正确的列移动到顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9386441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In Twitter Bootstrap 2, how can I get right columns to move to the top when shrinking the screen?
提问by eterps
I'm using a 2-column fluid layout in Twitter Bootstrap. The left column is the main content (span10), and the right column is a sidebar for widgets (span2). Currently, when resizing the browser window, Bootstrap responds by creating one column with the leftmost section on top, and the rightmost on bottom. I'd like it the other way around.
我在 Twitter Bootstrap 中使用 2 列流体布局。左栏是主要内容（span10），右栏是小部件的侧边栏（span2）。目前，当调整浏览器窗口的大小时，Bootstrap 的响应方式是创建一列，最左边的部分在顶部，最右边的部分在底部。我想反过来。
This is the gist of my html:
这是我的 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>
Is there any way to have mainContaineron the left and widgets on the right in a wide window, but snap sidebarto the top when the window shrinks?
有什么办法可以mainContainer在宽窗口中的左侧和右侧有小部件，但是sidebar当窗口缩小时会捕捉到顶部？
采纳答案by Andres Ilich
Responded to a question much like this one today, you can see it here, what it basically came down to was shifting the flow of the sidebar by floating it to the right and compensating for the left margin of the content area and then resetting the float attribute of the sidebar with a @mediaquery to accommodate the sidebar once again with its default value from the bootstrap stylesheet.
今天回答了一个很像这个问题，你可以在这里看到，它基本上归结为通过将侧边栏向右浮动并补偿内容区域的左边距然后重置浮动来改变侧边栏的流动带有@media查询的侧边栏的属性，以再次使用引导样式表中的默认值容纳侧边栏。
CSS
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;
}
}
Here is a reworked demo from the previous question: fiddle, edit here.
回答by konqi
In bootstrap 3 this is done with grid column ordering (see bootstrap 3 documentation)
在引导程序 3 中，这是通过网格列排序完成的（请参阅引导程序 3 文档）
Example
例子
<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>
This will show the upper divbehind the lower divif there is enough space. If the screen size is reduced the upper divwill stay up.
如果有足够的空间，这将div在下层后面显示上层div。如果屏幕尺寸减小，则上部div将保持向上。
回答by Benj
I come after the question is resolved with an extremely simple wayto achieve this. No need for @media nor percentage:
我是在用一种非常简单的方法解决了这个问题之后才来的。不需要@media 或百分比：
- Place the div you want on top of the page for mobiles before the other div. In this case #sidebar comes before #mainContainer in your HTML code
- Give to #sidebar the class pull-right
- Give to #mainContainer the class pull-left
- Set margin-left for those 2 divs to 0
- 将您想要的 div 放在其他 div 之前的移动设备页面顶部。在这种情况下，#sidebar 在 HTML 代码中出现在 #mainContainer 之前
- 给#sidebar 类向右拉
- 给 #mainContainer 类 pull-left
- 将这 2 个 div 的 margin-left 设置为 0
As a result you'll have your sidebar on the right for desktop and on top for mobiles.
因此，您将在桌面右侧和移动设备顶部拥有侧边栏。
Example:
例子：
--- 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;
}
回答by ScottS
Depending on your parameters, just reverse the sidebarand mainContainerdivs in the html source order and float: righteach of them. Something like: http://jsfiddle.net/3g8Bt/.
根据您的参数，只需反转html 源代码顺序中的sidebar和mainContainerdiv 以及float: right它们中的每一个。类似于：http: //jsfiddle.net/3g8Bt/。
回答by dv8withn8
I came up with a super-simple solution that seems to work with at least a 2 column layout. Just create a new class for you markup and some simple CSS.
我想出了一个超级简单的解决方案，它似乎至少适用于 2 列布局。只需为您的标记和一些简单的 CSS 创建一个新类。
HTML (Pulled from my Drupal .tpl)
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
CSS
.row-fluid .re-order {
margin: 0;
}
.row-fluid [class*="span"]:last-child {
margin-right: 2.7624309392265194%;
margin-left: 0;
}
This could probably be refined a bit more but it works.
这可能会进一步完善，但它有效。
回答by Cullen SUN
The accepted answer works great. Alternatively, sometimes things are complicated when you have several pieces of html need to appear at anti-bootstrappositions. It is also possible to solve it by creating duplicated html-snips, and use .visible-phone and .hidden-phone to control their show/hide.
接受的答案效果很好。或者，当您有几段 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>
