在Twitter Bootstrap 2中，如何在缩小屏幕时使右列移动到顶部？ [英] In Twitter Bootstrap 2, how can I get right columns to move to the top when shrinking the screen?
问题描述
我在Twitter Bootstrap中使用了2列流体布局。左侧列是主要内容（span10），右侧列是窗口小部件（span2）的侧边栏。目前，当调整浏览器窗口大小时，Bootstrap通过创建一个列来响应，最左边的部分在顶部，最右边的在底部。我想要反过来。
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.
这是我的HTML的要点：
This is the gist of my 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 到窗口收缩时顶部？
Is there any way to have mainContainer on the left and widgets on the right in a wide window, but snap sidebar to the top when the window shrinks?
推荐答案
今天回答了类似这样的问题，您可以此处查看，它基本上是到移动侧边栏的流动，通过将它漂浮到右边并补偿内容区域的左边距，然后重置侧边栏的float属性与 @media 查询，以便再次使用来自引导样式表的默认值来容纳侧栏。
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 @media query to accommodate the sidebar once again with its default value from the bootstrap stylesheet.
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;
}
}
这是一个从上一个问题的重做演示： a href =http://jsfiddle.net/andresilich/YEUwN/2/show/>小提琴，请编辑此处。
Here is a reworked demo from the previous question: fiddle, edit here.
这篇关于在Twitter Bootstrap 2中，如何在缩小屏幕时使右列移动到顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
