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

时间：2014-08-16 11:21:04

标签： html css twitter-bootstrap twitter-bootstrap-3

场景：我有一个可渲染模板的编辑器小部件（想想textarea），已编辑模板的预览面板以及渲染预览时生成的错误消息列表。我想要的布局是这样的：

small screen:            large screen:

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

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

关于该主题的其他帖子暗示了＆＃34;最小的＆＃34; layout规定了HTML中DIV的顺序，因此可以是：编辑器，错误，预览。他们进一步指出用-pull-和-push-类改变大屏幕上的顺序。我尝试通过在预览中添加col-lg-pull-6并在错误中添加col-lg-push-6来实现这一点。据我所知，相对于元素的当前位置推/拉工作，所以应该将预览拉回到第一行，并将错误框推入第二行。

请注意，我没有使用＆＃34;行＆＃34;课程，因为我不完全理解 如何使用它们;将元素放置到行中应该取决于屏幕大小，而不是由HTML修复（这是响应式布局的重点，不是吗？）

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

5 个答案:

答案 0 :(得分：6)

在你的问题中，你提到使用行。 .row清除列浮动并调整列的左右边距，以便外部没有额外的填充，不使用.row会弄乱您的布局。以下是Bootstrap网格的非常全面的指南： http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works 。

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

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

enter image description here

DEMO：http://jsbin.com/dimuq/1

小视图港口：

enter image description here

大视图港口：

enter image description here

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>

答案 1 :(得分：1)

试试这个：

<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>

答案 2 :(得分：0)

我建议您查看this以帮助您。

每天使用Bootstrap，对我来说这很好用。要做更多的事情＆＃34;激进＆＃34;可以让你处于一个位置，你应该重新构建基本CSS代码以满足您的需求。

另一种解决方案是在转向移动时使用jQuery 追加或 prepend 这些div。希望其中一些可以帮到你！

答案 3 :(得分：0)

我想出了一个有趣的解决方案：BOOTPLY。这包含使用pull-right类在大视口上移动预览列，然后将marginTop（向上移动div）更改为其他2个div的组合高度。这将它放在你想要的确切位置。

<强> 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 custom

现在这个解决方案的问题是当你移动到小视口时，preview重叠editor，所以如果你使用相同的高度变量并做相反的运动（{{1} }）在较小的视口上，它将被放回原位。

此解决方案的主要好处是避免多个完全相同的div

答案 4 :(得分：0)

如果您可以在桌面视图中将编辑器和预览设置为固定高度，则可以很容易地执行此操作：

<强> 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 

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

<强>演示

http://www.bootply.com/4jpGHUJWzp

相关问题
最新问题