我希望使用行跨度具有可变数量的列,在xs上是特定的3列,在sm上是2列(在另一个上面是前2列),在lg上是3列.我不知道如何为sm屏幕实现响应行.
这是视觉表示:
到目前为止,这是我的代码:
<div class="container text-center"> <div class="row"> <div class="col-sm-4 col-lg-3 col-lg-push-9"> <div class="alert alert-warning">A</div> </div> <div class="col-sm-4 col-lg-3 col-lg-pull-3"> <div class="alert alert-info">B</div> </div> <div class="col-sm-8 col-lg-6 col-lg-pull-3"> <div class="alert alert-danger">C</div> </div> </div> </div>
这是codepen:http://codepen.io/nebitno/pen/ORxjLv
解决方法
这非常棘手.这是我提出的解决方案.您需要使用一些jQuery来获得所需的结果.
这是html,注意我是如何切换列的:
<div class="container text-center"> <div class="row"> <div class="col-sm-4 col-lg-3 col-lg-push-9"> <div class="alert alert-warning">A</div> </div> <div class="col-sm-8 col-lg-6 col-lg-pull-0 big"> <div class="alert alert-danger">C</div> </div> <div class="col-sm-4 col-lg-3 col-lg-pull-9 small"> <div class="alert alert-info">B</div> </div> </div> </div>
这是jQuery:
<script> var $iW = $(window).innerWidth(); if ($iW < 768){ $('.small').insertBefore('.big'); }else{ $('.big').insertBefore('.small'); } </script>
注意:这样做的缺点是jQuery没有绑定到窗口大小调整.因此,如果您在文档加载后调整窗口大小,则会产生非常糟糕的结果.但是,这也可以通过使用$(window).resize(function(){})来修复;
但是,如果你根本不想使用JS.这是另一个需要您复制其中一个块的解决方案.如果这个块的内容是静态的而不是很多,我相信这是一个很好的妥协.但是,您也可以调整一下以满足您的需求.
这是HTML:
<div class="container text-center"> <div class="row"> <div class="col-sm-4 col-lg-3 col-lg-push-9"> <div class="alert alert-warning">A</div> </div> <div class="col-sm-4 small-screen-only"> <div class="alert alert-info">B</div> </div> <div class="col-sm-8 col-lg-6 col-lg-pull-0 big"> <div class="alert alert-danger">C</div> </div> <div class="col-sm-4 col-lg-3 col-lg-pull-9 small"> <div class="alert alert-info">B</div> </div> </div> </div>
注意块B的重复.
这是CSS:
.small-screen-only{ display: none; } @media all and (max-width: 767px) { .small-screen-only{ display: block } .small{ display: none; } }
我个人会选择CSS选项,因为它更像浏览器原生.即使块的内容是动态添加的,我相信你仍然可以找到解决方法.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。