Question

此网格的移动设备和平板电脑布局如下：

[页眉]

[图像]

[内容]

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

下面的代码片段首先使用移动设备创建，以便可以在大屏幕中重新排序。但内容列不在中/大屏幕的标题下方。 内容列应填充剩余高度。

如何使其达到理想的布局？如果引导程序无法实现，我可以使用flexbox吗？

＆＃13;

.tall {
  height: 150px;
}

＆＃13;

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

＆＃13;

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>

你可以在div上使用可见的，不可见的标准但你应该引入相同的div两次，如果你需要维护结构。这是一个快速的黑客，但应该重复div来维护结构。（编辑：请参阅lamelemon的帖子）
这是一个需要考虑的新事物。尝试在最近推出的css中使用网格布局。无论你解释什么，都可以使用css完成几行代码。 https://css-tricks.com/snippets/css/complete-guide-grid/和查看此YouTube视频https://www.youtube.com/watch?v=3vJE3bVoF-Q以获取网格演示

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

＆＃13;

.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*/

＆＃13;

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

＆＃13;

Answer 2

我不认为你可以在没有空格的情况下使用bootstrap来实现这一目标，除非你的内容填满它，但你可以做什么，因为它只是一个图像是在两个点加载图像和使用.visible-*和.hidden-*隐藏和显示，具体取决于屏幕尺寸。

＆＃13;

.tall {height: 150px;}

＆＃13;

<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 hidden-sm hidden-xs">
          <div class="well tall">Image</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <div class="well">Header</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 visible-sm visible-xs">
          <div class="well tall">Image</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <div class="well">Content</div>
        </div>
      </div>    
    </div>
  </div>
</div>

＆＃13;

重新排序bootstrap中的列以获得更大的显示

2 个答案: