根据屏幕大小更改Bootstrap DIV顺序

Question

场景:我有一个可渲染模板的编辑器小部件(想想textarea),编辑模板的预览面板,以及渲染预览时生成的错误消息列表.我的预期布局是这样的:

small screen:            large screen:

+--------------+         +--------------+ +--------------+
|              |         |              | |              |
|    editor    |         |    editor    | |    preview   |
|              |         |              | |              |
+--------------+         +--------------+ +--------------+
|              |         +-------------------------------+
|    errors    |         |                               |
|              |         |            errors             |
+--------------+         |                               |
|              |         +-------------------------------+
|   preview    |         
|              |
+--------------+    

我只需要这两个布局(不是三个或四个),因为只有-lg足够大才能使编辑器和预览彼此相邻.为了控制尺寸,我将col-xs-12添加到所有三个DIV,并将col-lg-6添加到编辑器和预览中(错误列表应在大屏幕上保持为12).

关于该主题的其他帖子表明,"最小"布局决定了HTML中DIV的顺序,因此它将是:编辑器,错误,预览.他们进一步指出用-pull-和-push-类改变大屏幕上的顺序.我尝试通过在预览中添加col-lg-pull-6并在错误中添加col-lg-push-6来实现这一点.据我所知,相对于元素的当前位置推/拉工作,因此应该将预览拉回到第一行,并将错误框推入第二行.

请注意,我没有使用"行"类,因为我不完全了解如何使用它们; 将元素放置到行中应该取决于屏幕大小,而不是由HTML修复(这是响应式布局的整个点,不是吗？)

其他帖子也建议将其中一个盒子渲染两次,根据屏幕尺寸使其中一个不可见,但他们缺乏彻底解释为什么这是一个好主意.这纯粹是一个布局问题,而且响应式布局的重点也是如此,所以我不必弄乱HTML以适应屏幕尺寸.

Answer 1

在你的问题中,你提到使用行.该.row清除列彩车和调整列的左,右页边距,使没有微胖在外面,不使用.row会搞乱你的布局.这是一个非常全面的Bootstrap网格指南:http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works.

使用Flexbox是纯css中唯一的方法.为了解决旧浏览器(包括小于或等于ie9),我使用Modernizr(这个演示链接中的一个添加.flexbox或.no-flexbox在html元素上,它只是为了这个演示.这样,你可以隔离你对flex模型的使用在支持它的浏览器上,你的后备将是你在html中设置的标准引导列.不要忘记按照GetBootstrap.com上的网格说明.你需要自己构建Modernizr.

要让Bootstrap.css在IE8上运行,您需要使用Respond.js - 查看他们的文档并使用相对路径在本地链接CSS.使用jQuery 1系列,大于1.10但1.9工作.旧的IE 8浏览器不支持jQuery 2.

演示:http://jsbin.com/dimuq/1

小景观港口:

大观景点:

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%;
    }
}

在此处了解有关Flexbox的更多信息:http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 和http://philipwalton.github.io/solved-by-flexbox/

HTML - 要求Modernizr检查flexbox并将类flexbox添加到html(请参阅demo 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>