twitter-bootstrap 根据屏幕大小更改 Bootstrap DIV 顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25339664/
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
change Bootstrap DIV order depending on screen size
提问by Martin Geisse
Scenario: I have an editor widget (think textarea) for a renderable template, a preview panel for the edited template, and a list of error messages generated when rendering the preview. My intended layout is like this:
场景：我有一个用于可渲染模板的编辑器小部件（想想 textarea），一个用于编辑模板的预览面板，以及渲染预览时生成的错误消息列表。我的预期布局是这样的：
small screen: large screen:
+--------------+ +--------------+ +--------------+
| | | | | |
| editor | | editor | | preview |
| | | | | |
+--------------+ +--------------+ +--------------+
| | +-------------------------------+
| errors | | |
| | | errors |
+--------------+ | |
| | +-------------------------------+
| preview |
| |
+--------------+
I only need those two layouts (not three or four), as only -lg is large enough to make sense for the editor and preview to be next to each other. To control the sizes, I added col-xs-12 to all three DIVs and col-lg-6 to the editor and preview (the error list should stay at 12 on large screens).
我只需要这两个布局（而不是三个或四个），因为只有 -lg 足够大才能使编辑器和预览彼此相邻。为了控制大小，我将 col-xs-12 添加到所有三个 DIV 并将 col-lg-6 添加到编辑器和预览（错误列表在大屏幕上应保持为 12）。
Other posts about the topic have suggested that the "smallest" layout dictates the order of the DIVs in the HTML, so that would be: editor, errors, preview. They further tell to change the order on large screens with -pull- and -push- classes. I tried doing that by adding col-lg-pull-6 to the preview and col-lg-push-6 to the errors. As far as I understand, push/pull work relative to the current position of the elements, so that should have pulled the preview back into the first row, and pushed the errors box into the second row.
关于该主题的其他帖子表明“最小”布局决定了 HTML 中 DIV 的顺序，因此将是：编辑器、错误、预览。他们进一步告诉使用 -pull- 和 -push- 类更改大屏幕上的顺序。我尝试通过将 col-lg-pull-6 添加到预览并将 col-lg-push-6 添加到错误来做到这一点。据我了解，推/拉相对于元素的当前位置工作，因此应该将预览拉回第一行，并将错误框推入第二行。
Note that I didn't use the "row" classes as I don't fully understand howto use them; the placement of elements into rows should depend on the screen size, not fixed by the HTML (that's the whole point of a responsive layout, isn't it?)
请注意，我没有使用“row”类，因为我不完全了解如何使用它们；元素在行中的放置应该取决于屏幕大小，而不是由 HTML 固定（这是响应式布局的全部意义，不是吗？）
Other posts have also suggested to render one of the boxes twice, making one of them invisible depending on screen size, but they lack thorough explanation why this is a good idea. This is purely a layout issue, and again the whole point of a responsive layout is so I don't have to mess up the HTML to adapt to screen sizes.
其他帖子也建议将其中一个框渲染两次，根据屏幕尺寸使其中一个不可见，但他们缺乏详细解释为什么这是一个好主意。这纯粹是一个布局问题，同样，响应式布局的全部意义在于，我不必为了适应屏幕尺寸而弄乱 HTML。
采纳答案by Christina
In your question you mention using rows. The .rowclears the column floats and adjusts the left and right margins of the columns so that there is not extra padding on the outside, not using the .rowwill mess up your layout. Here's a very comprehensive guide to the Bootstrap grid: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works.
在您的问题中，您提到使用行。该.row清除列彩车和调整列这样的左，右页边距不存在微胖在外面，不使用.row会搞乱你的布局。这是一个非常全面的 Bootstrap 网格指南：http: //www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works。
Using Flexbox is the only way to do it in pure css. To address older browsers (including less than or equal to ie9), I use Modernizr (the one in this demo link adds .flexboxor .no-flexboxon the html element, it's just for this demo. In this way, you can isolate your use of the flex model on browsers that support it and your fallback will be the standard bootstrap columns you set in your html. Don't forget to follow the grid instructions on GetBootstrap.com. You will need to make your own build of Modernizr.
使用 Flexbox 是在纯 css 中做到这一点的唯一方法。针对老浏览器（包括小于等于ie9），我用的是Modernizr（这个demo链接里面加的.flexbox或者.no-flexbox在html元素上的，只是为了这个demo。这样可以隔离你对flex模型的使用在支持它的浏览器上，你的后备将是你在 html 中设置的标准引导列。不要忘记遵循 GetBootstrap.com 上的网格说明。你需要自己构建 Modernizr。
To get Bootstrap.css to work on IE8, you need to use Respond.js -- see their docs and link up the CSS locally with relative path. Use jQuery 1 series, greater than 1.10 though 1.9 works. jQuery 2 is not supported in older IE 8 browsers.
要让 Bootstrap.css 在 IE8 上工作，您需要使用 Respond.js —— 查看他们的文档并使用相对路径在本地链接 CSS。使用 jQuery 1 系列，大于 1.10 虽然 1.9 有效。较旧的 IE 8 浏览器不支持 jQuery 2。
DEMO: http://jsbin.com/dimuq/1
演示：http: //jsbin.com/dimuq/1
SMALL VIEW PORT:
小视口：
LARGE VIEW PORT:
大视野：
CSS:
CSS：
/* uses Modernizr to add .flexbox to html class, if not supported the fallback are the basic bootstrap grid */
@media (min-width:992px) { /* choose your min-width this is using the md- default */
.flexbox .flex-row.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flexbox .flex-row [class*=flexcol-] {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flexbox .flex-row .flexcol-editor,
.flexbox .flex-row .flexcol-preview {width:50%;}
.flexbox .flex-row .panel {
width: 100%;
/*something to keep it open and add some inner style */
}
.flexbox .flex-row .flexcol-errors {
order: 2;
width:100%;
}
}
Learn more about Flexbox here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/and http://philipwalton.github.io/solved-by-flexbox/
在此处了解有关 Flexbox 的更多信息：http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 和http://philipwalton.github.io/solved-by-flexbox/
HTML -- requires Modernizr to check for flexbox and add class flexbox to the html (see demo js panel)
HTML -- 需要 Modernizr 来检查 flexbox 并将类 flexbox 添加到 html（参见演示 js 面板）
<div class="container">
<div class="flex-row row">
<div class="col-md-6 flexcol-editor">
<div class="panel panel-default">
<div class="panel-heading">Editor</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
</div>
</div>
<div class="col-md-6 flexcol-errors">
<div class="panel panel-default">
<div class="panel-heading">Errors</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et.</div>
</div>
</div>
<div class="col-md-12 flexcol-preview clearfix">
<div class="panel panel-default">
<div class="panel-heading">Preview</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</div>
回答by Suganth G
Try this:
试试这个：
<div class="row">
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
editor
</div>
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 hidden-md hidden-lg">
errors
</div>
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 ">
preview
</div>
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 hidden-sm hidden-xs">
errors
</div>
</div>
回答by ProDexorite
I would recommend to check thisto help you on this.
我建议检查这个以帮助你解决这个问题。
Working with Bootstrap on a daily basis and for me this is working good. To make something more "radical" could set you in a position where by you should re-build the base CSS code to fit your needs.
每天与 Bootstrap 一起工作，对我来说这很好用。做一些更“激进”的事情可能会让你处于一个位置，你应该重新构建基本的 CSS 代码以满足你的需要。
Another solution would be to use jQuery to appendor prependthese divs when turning to mobile. Hopefully some of this helps you!
另一种解决方案是在转向移动设备时使用 jQuery附加或预先添加这些 div。希望其中一些对您有所帮助！
回答by Jordan.J.D
I came up with a fun solution for you: BOOTPLY. This incorporates using the pull-rightclass to move the preview column on a large viewport, then changing marginTop(to move the div up) the combined height of the other 2 divs. this lands it in the exact place you want.
我想出了一个有趣的解决方案：BOOTPLY。这包括使用pull-right类在大视口上移动预览列，然后更改marginTop（向上移动 div）其他 2 个 div 的组合高度。这将它放在您想要的确切位置。
HTML:
HTML:
<div class="container">
<div class="row">
<div id="editor" class="col-xs-12 col-lg-6" style="background-color:red;">editor</div>
<div id="errors" class="col-xs-12 col-lg-12" style="background-color:blue;">errors</div>
<div id="preview" class="col-xs-12 col-lg-6 pull-right" style="background-color:green;">preview</div>
</div>
Jquery:
查询：
var h=0;
$(document).ready(function(){
h=document.getElementById("errors").offsetHeight + document.getElementById("editor").offsetHeight;
$("#preview").css("marginTop", "-="+h);
});
Large viewport:
大视口：
Now the problem with this solution right now is when you move to the small viewport, previewoverlaps editor, so if you use the same height variable and do the opposite movement ( marginTop: "+=" +h) to it on the smaller viewport, it'll be put back in place.
现在这个解决方案的问题是当你移动到小视口时，preview重叠editor，所以如果你使用相同的高度变量并marginTop: "+=" +h在较小的视口上对其进行相反的移动 ( )，它将被放回原位。
The main benefit of this solution is avoiding multiple of the exact same divs
此解决方案的主要好处是避免了多个完全相同的 div
回答by Khan
If you can set the editor and the preview to be a fixed height in the desktop view, it's pretty easy to do this:
如果您可以在桌面视图中将编辑器和预览设置为固定高度，则很容易做到这一点：
HTML
HTML
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="editor">
editor.
</div>
</div>
</div>
<div class="errors">
errors.
</div>
<div class="preview">
preview.
</div>
</div>
CSS
CSS
.container {position: relative;}
.editor {height: 200px; overflow: auto; background: #eee;}
.errors {min-height: 100px; margin: 15px 0; background: #eee;}
.preview {min-height: 100px; background: #ddd;}
@media (min-width: 1200px) {
.preview {position: absolute; top: 0; right: 15px; width: 575px; height: 200px; }
}
Demo
演示
