html - 在 bootstrap 中对列重新排序以获得更大的显示

Question

此网格的手机和平板电脑布局如下:

[标题]

[图片]

[内容]

但是，在中/大屏幕上，我想将其更改为这种布局

下面的代码片段是使用移动设备优先创建的，因此可以在大屏幕上重新排序。但在中/大屏幕中，内容栏不在标题的正下方。 内容栏应填满剩余高度。

如何将其设置为所需的布局？如果不能通过 bootstrap 实现，我可以使用 flexbox 吗？

.tall {
  height: 150px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
  <div class="row"> 
    <div class="col-sm-12">
      <h4>Reorder columns in larger display</h4>
      <div class="row"> 
        <div class="col-xs-12 col-sm-12 col-md-6 col-md-push-6">
          <div class="well">Header</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6">
          <div class="well tall">Image</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-md-push-6">
          <div class="well">Content</div>
        </div>
      </div>    
    </div>
  </div>
</div>

Answer 1

您不能直接在 bootstrap 中执行此操作。您需要根据屏幕大小将内容 div 移动到标题 div 旁边。这无法完成，因为 css 无法在 html 周围移动 div。

1. 一种解决方案是使用 jquery 在尺寸发生变化时移动 div。请参阅下面的代码示例。但这可能会导致性能问题，因为它会在屏幕调整大小时检查标准。

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" type="application/javascript"></script>
<script type="application/javascript">
    function moveDiv(){
        if($(window).width() > 990 ){ // screen size 
            $("#content").insertAfter("#header"); //insert after header div
        }else{
            $("#content").appendTo("#contentbox"); // append it as child to contentbox
        }
    }
    $(document).ready(function () {
        moveDiv();// default check whenever page loads
        $(window).resize(function(){
         moveDiv(); // on resize check
        });
    });
</script>
<div class="container text-center">
<div class="row">
    <div class="col-sm-12">
        <h4>Reorder columns in larger display</h4>
        <div class="row">
            <div id="headerbox" class="col-xs-12 col-sm-12 col-md-6 col-md-push-6">
                <div id="header" class="well">Header</div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6">
                <div class="well tall">Image</div>
            </div>

            <div id="contentbox" class="col-xs-12 col-sm-12 col-md-6 col-md-push-6">
                <div id="content" class="well">Content</div>
            </div>

        </div>
    </div>
</div>

1. 您可以在 div 上使用可见、不可见条件，但是如果您需要维护结构，您应该引入相同的 div 两次。这是一个快速的 hack，但应该重复 div 以维护结构。(编辑:引用lamelemon的帖子)

2. 这是需要考虑的新事物。尝试在最近引入的 css 中使用网格布局。无论您解释了什么，都可以仅使用 css 用几行代码来完成。 https://css-tricks.com/snippets/css/complete-guide-grid/和看看这个 youtube 视频 https://www.youtube.com/watch?v=3vJE3bVoF-Q网格演示

如果您不使用 Bootstrap ，您可以像我在代码片段中解释的那样使用常规 css 来执行此操作。但是您必须处理与旧浏览器的兼容性。

.tall {
  height: 150px;
}

.divborder {
  border: hidden;
  margin: 1em;
  background-color: grey;
}

@supports (display: grid) /*If browser supports grid*/  {

 /*default div is displayed one by one*/
 
 /*for bigger screen sizes*/
  @media all and (min-width: 600px) {
    .box { /* grid container*/
      display: grid;
      grid-template-columns: 1fr 1fr; /*Specify number of columns 1fr is one fraction of screen*/
      grid-template-rows: 1fr 1fr; /*Specify number of rows*/
    }
    .header {
      grid-row: 1/2; /*start from 1 and end at 2 */
      grid-column: 2/-1; /*start from 2 and end of box (left to right edge)*/
    }
    .image {
      grid-row: 1/-1; /*top to bottom of row*/
      grid-column: 1/2
    }
    .content {
      grid-row: 2/-1;
      grid-column: 2/-1;
    }
  }
}
/*Code for backward compatability*/

<h4>Reorder columns in larger display</h4>
<div class="box">
  <div id="header" class="header divborder">Header</div>
  <div class="image tall divborder">Image</div>
  <div id="content" class="content well divborder">Content</div>
</div>