2 或 3 个响应列引导程序

Question

我想使用行跨度来获得可变数量的列，具体是 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

Answer 1

这很棘手。这是我想出的解决方案。您将需要使用一些 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>

注意block B的重复。

这里是 CSS：

       .small-screen-only{
            display: none;
        }

        @media all and (max-width: 767px)
        {
            .small-screen-only{
                display: block
            }

            .small{
                display: none;
            }
        }

我个人会选择 CSS 选项，因为它更适合浏览器。即使块的内容是动态添加的，相信你还是能找到解决办法的。

Answer 2

对于纯 CSS 解决方案，您可以在断点 sm 处相对于 .row 绝对定位 列 C，并清除 列 B。使用额外的 CSS 保持 HTML 和 CSS 不变：

@media screen and (min-width: 768px) and (max-width : 1200px) {

    .row {
        position:relative;
    }

    .col-sm-4:nth-child(2) {
        clear:left;
    }

    div[class^="col-"]:last-child {
        position:absolute;
        right:0;
    }

}

这种方法的缺点是，如果 C 列 的高度超过 A + B 列 的高度，.row 将无法正确清除在Clearfix with absolute positioned elements 中解释。

这是您的 Codepen 的 updated version。

Answer 3

我对您的 html 进行了一些细微的更改，并添加了两种 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-4 col-lg-3 col-lg-pull-3 B">  
            <div class="alert alert-info">B</div>
        </div>     

        <div class="col-sm-8  col-lg-6 col-lg-pull-3 C">
            <div class="alert alert-danger" >C</div>
        </div>  

    </div>
</div>

jQuery(第一种方式)-

 var wH = $(window).innerWidth();
              if (wH < 992 && wH>=768){
                 $('.C:parent').each(function () {
                    $(this).insertBefore($(this).prev('.B'));
                 });
              }else if(wH<768 || wH>=992)
              {
                 $('.B:parent').each(function () {
                    $(this).insertBefore($(this).prev('.C'));
              });   
}
$(window).resize(function() {
          wH = $(window).innerWidth();
          if (wH < 992 && wH>=768){
             $('.C').insertBefore('.B');        
          }else if(wH<768 || wH>=992)
          {
             $('.B').insertBefore('.C');        
          }
          })

看看这个小提琴： http://jsfiddle.net/SkyT/wVVbT/150/

jQuery（第二种方式）-

var wH = $(window).innerWidth();
              if (wH < 992 && wH>=768){
                 $('.C').insertBefore('.B');        
              }else if(wH<768 || wH>=992)
              {
                 $('.B').insertBefore('.C');        
              }
$(window).resize(function() {
              var wH = $(window).innerWidth();
              if (wH < 992 && wH>=768){
                 $('.C:parent').each(function () {
                      $(this).insertBefore($(this).prev('.B'));
                 });
              }else if(wH<768 || wH>=992)
              {
                 $('.B:parent').each(function () {
                      $(this).insertBefore($(this).prev('.C'));
                 });    
              }
              })

查看这个小提琴：https://jsfiddle.net/SkyT/tst5g7ec/1/