[html] 如何在移动版面上更改Bootstrap 3列顺序?



Answers

这里的答案仅适用于2个单元格,但只要这些列中有更多的单元格,就会导致更复杂一点。 我想我已经为多列中的任意数量的单元找到了一个通用的解决方案。

目标

在移动设备上获取垂直的标签序列,以便按照设计在平板电脑/台式机上所需的任何顺序进行排列。 在这个具体的例子中,一个标签必须比平常更早进入流程,而另一个标签必须晚于平时进入流程。

移动

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

平板+

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

因此,标题需要在平板电脑+上进行洗牌,而从技术上来说,它的标题就位于移动设备上的标题标签之上。 你马上就会看到4个标题也有问题。

我们假设每个单元格的高度可能会有所不同,并且需要与下一个单元格一齐冲洗(排除像表格这样的弱技巧)。

与所有Bootstrap Grid问题一样,第1步是要实现HTML必须以页面上的移动顺序1 2 3 4 5。 然后,确定如何让平板电脑/桌面以这种方式重新排序 - 理想情况下不使用Javascript。

获得1 headline3 qty坐在右边而不是左边的解决方案是简单地将它们设置pull-right 。 这适用于CSS float: right ,这意味着他们找到他们将适合的第一个开放空间。 您可以将浏览器的CSS处理器按照以下顺序进行操作:1适合右上角。 2是下一个,并且是正常的( float: left ),所以它到达左上角。 然后3,这是float: right所以它跳过1下面。

但是这个解决方案对于4 caption是不够的。 因为右边的2个单元格非常短,所以左边的图片往往会长于两者的组合。 Bootstrap Grid是一个荣耀的浮动黑客攻击,意思是4 captionfloat: left 。 由于2 image占据了左侧的很多空间,所以4 caption试图适合下一个可用空间 - 通常是右列,而不是我们想要的左侧。

这里的解决方案(更常见的是针对这样的任何问题)是在平板电脑上添加一个隐藏在移动设备上的hack标签,以便将标题推出,然后由负边距来掩盖 - 如下所示:

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

HTML:

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS:

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

所以,这里的通用解决方案是添加可以在手机上消失的hack标签。 在平板电脑上,hack标签允许显示的标签出现在流程中的更早或更晚的时间,然后上下拉动以覆盖这些hack标签。

注意:为了链接的jsfiddle中的简单示例,我使用了固定高度,但我所处理的实际网站内容在所有5个标签中的高度不同。 它可以正确渲染标签高度差异较大的图片,特别是图片和描述。

注2:根据您的布局,您可能在平板电脑+(或更高分辨率)上具有足够一致的列顺序,以避免使用hack标记,而是使用margin-bottom ,如下所示:

注3:这使用Bootstrap 3.引导程序4使用不同的网格集,并且不适用于这些示例。

http://jsfiddle.net/b9chris/52VtD/16632/

Question

我正在制作一个具有顶级固定导航栏的响应式布局。 在下面我有两列,一个用于侧栏(3),另一个用于内容(9)。 在桌面上看起来像这样

导航栏
[3] [9]

当我resize到移动设备时, navbar被压缩并隐藏,然后侧栏被堆叠在内容的顶部,如下所示:

导航栏
[3]
[9]

我希望顶部的主要内容,所以我需要将移动订单更改为:

导航栏
[9]
[3]

我发现这篇文章涵盖了相同的观点,但已接受的答案已经被编辑,表示该解决方案不适用于当前版本的Bootstrap。

我如何在移动设备上重新排列这些列? 或者,如何将sidbar列表组添加到我的扩展导航栏中?

这是我的代码:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->



首先从移动版开始,大部分时间你都可以达到你想要的。

这里的例子:

http://jsbin.com/wulexiq/edit?html,css,output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>



jQuery使用insertAfter()或insertBefore()这很容易。

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

那很简单

如果你想为移动设备设置条件,你可以这样做

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

示例https://jsfiddle.net/w9n27k23/






Related