Bootstrap3 中的列排序 - 推拉 [英] Column Ordering in Bootstrap3 - Push and Pull

查看：42
本文介绍了Bootstrap3 中的列排序 - 推拉的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用引导程序 3 我有一些关于使用列排序推/拉的问题.这就是我所追求的:

我有这个代码:

第 1 栏
<div class="col-xs-10 col-sm-3 col-md-2">第 2 栏

<div class="col-xs-10 col-sm-3 col-md-2">第 3 栏

<div class="col-xs-10 col-sm-9 col-md-4">紫色盒子.

<div class="col-xs-2 col-sm-3 col-md-2">橙色盒子.

如果我将 pull 修饰符类添加到 sm/xs 的紫色框中并推送到三列，则会产生奇怪的结果.有人能告诉我我错过了什么吗?

解决方案

@kalhartt 会是对的，见:http://bootply.com/91310.您应该为 10 列网格定义一些网格类，以解决这个 2-2-2-4-2.

附加 CSS:

@media(最小宽度:992px){.col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8、.col-md10-9、.col-md10-10{位置:相对；最小高度:1px；左边距:15px；padding-right: 15px;}.col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8, .col-md10-9 {向左飘浮;}.col-md10-10 {宽度:100%；}.col-md10-9 {宽度:90%；}.col-md10-8 {宽度:80%；}.col-md10-7 {宽度:70%；}.col-md10-6 {宽度:60%；}.col-md10-5 {宽度:50%；}.col-md10-4 {宽度:40%；}.col-md10-3 {宽度:30%；}.col-md10-2 {宽度:20%；}.col-md10-1 {宽度:10%；}.col-md10-pull-10 {正确:100%；}.col-md10-pull-9 {正确:90%；}.col-md10-pull-8 {正确:80%；}.col-md10-pull-7 {正确:70%；}.col-md10-pull-6 {正确:60%；}.col-md10-pull-5 {正确:50%；}.col-md10-pull-4 {正确:40%；}.col-md10-pull-3 {正确:30%；}.col-md10-pull-2 {正确:20%；}.col-md10-pull-1 {正确:10%；}.col-md10-push-10 {左:100%；}.col-md10-push-9 {左:90%；}.col-md10-push-8 {左:80%；}.col-md10-push-7 {左:70%；}.col-md10-push-6 {左:60%；}.col-md10-push-5 {左:50%；}.col-md10-push-4 {左:40%；}.col-md10-push-3 {左:30%；}.col-md10-push-2 {左:20%；}.col-md10-push-1 {左:10%；}.col-md10-offset-10 {左边距:100%；}.col-md10-offset-9 {左边距:90%；}.col-md10-offset-8 {左边距:80%；}.col-md10-offset-7 {左边距:70%；}.col-md10-offset-6 {左边距:60%；}.col-md10-offset-5 {左边距:50%；}.col-md10-offset-4 {左边距:40%；}.col-md10-offset-3 {左边距:30%；}.col-md10-offset-2 {左边距:20%；}.col-md10-offset-1 {左边距:10%；}}

html:

<div class="row"><div class="col-md-10 col-sm-9 col-xs-10"><div class="row"><div class="col-md10-4 col-md10-push-6 col-xs-12" style="height:50px;background-color:#CA0088"></div><div class="col-md10-6 col-md10-pull-4 col-xs-12"><div class="row"><div class="col-sm-4 col-xs-12" style="height:50px;background-color:#A7A8AA"></div><div class="col-sm-4 col-xs-12" style="height:50px;background-color:#D0D1D3"></div><div class="col-sm-4 col-xs-12" style="height:50px;background-color:#E7E7E9"></div>

<div class="col-md-2 col-sm-3 col-xs-2" style="height:50px;background-color:#E0922E"></div>

请注意，您目前无法仅使用 Less 构建额外的 CSS.

第一部分的列名 .col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6、.col-md10-7、.col-md10-8、.col-md10-9、.col-md10-10{位置:相对；最小高度:1px；左边距:15px；padding-right: 15px;} 是 mixins.less 中的硬代码(参见:https://github.com/twbs/bootstrap/issues/11321)

第二部分可以通过以下方式构建:

//核心变量和mixin@import "variables.less";@import "mixins.less";@网格列:10；@media(最小宽度:@screen-md-min){.make-grid-columns-float(md10);.make-grid(@grid-columns, md10, 宽度);.make-grid(@grid-columns, md10, pull);.make-grid(@grid-columns, md10, push);.make-grid(@grid-columns, md10, offset);}

因为在 make-grid() 和 make-grid-columns-float 中使用的这个集合 @grid-columns 你不能同时编译两个网格.另请参阅:https://github.com/twbs/bootstrap/issues/11322

Using bootstrap 3 I have some questions about push/pull with column ordering. Here's what I am after:

I have this code:

<div class="col-xs-10 col-sm-3 col-md-2">
        Column 1
    </div>
    <div class="col-xs-10 col-sm-3 col-md-2">
        Column 2
    </div>
    <div class="col-xs-10 col-sm-3 col-md-2">
        Column 3
    </div>
    <div class="col-xs-10 col-sm-9 col-md-4">
        Purple box.
    </div>
    <div class="col-xs-2 col-sm-3 col-md-2">
        Orange box.
    </div>

If I add the pull modifier class to the purple box for sm/xs and push to the three columns, it produces strange results. Can someone tell me what I'm missing?

解决方案

@kalhartt will be right, see: http://bootply.com/91310. You should define some grid classes for a 10 column grid, to solve this 2-2-2-4-2.

Additional CSS:

@media (min-width: 992px) {
.col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8, .col-md10-9, .col-md10-10
{
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}   


  .col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8, .col-md10-9 {
    float: left;
  }
  .col-md10-10 {
    width: 100%;
  }
  .col-md10-9 {
    width: 90%;
  }
  .col-md10-8 {
    width: 80%;
  }
  .col-md10-7 {
    width: 70%;
  }
  .col-md10-6 {
    width: 60%;
  }
  .col-md10-5 {
    width: 50%;
  }
  .col-md10-4 {
    width: 40%;
  }
  .col-md10-3 {
    width: 30%;
  }
  .col-md10-2 {
    width: 20%;
  }
  .col-md10-1 {
    width: 10%;
  }
  .col-md10-pull-10 {
    right: 100%;
  }
  .col-md10-pull-9 {
    right: 90%;
  }
  .col-md10-pull-8 {
    right: 80%;
  }
  .col-md10-pull-7 {
    right: 70%;
  }
  .col-md10-pull-6 {
    right: 60%;
  }
  .col-md10-pull-5 {
    right: 50%;
  }
  .col-md10-pull-4 {
    right: 40%;
  }
  .col-md10-pull-3 {
    right: 30%;
  }
  .col-md10-pull-2 {
    right: 20%;
  }
  .col-md10-pull-1 {
    right: 10%;
  }
  .col-md10-push-10 {
    left: 100%;
  }
  .col-md10-push-9 {
    left: 90%;
  }
  .col-md10-push-8 {
    left: 80%;
  }
  .col-md10-push-7 {
    left: 70%;
  }
  .col-md10-push-6 {
    left: 60%;
  }
  .col-md10-push-5 {
    left: 50%;
  }
  .col-md10-push-4 {
    left: 40%;
  }
  .col-md10-push-3 {
    left: 30%;
  }
  .col-md10-push-2 {
    left: 20%;
  }
  .col-md10-push-1 {
    left: 10%;
  }
  .col-md10-offset-10 {
    margin-left: 100%;
  }
  .col-md10-offset-9 {
    margin-left: 90%;
  }
  .col-md10-offset-8 {
    margin-left: 80%;
  }
  .col-md10-offset-7 {
    margin-left: 70%;
  }
  .col-md10-offset-6 {
    margin-left: 60%;
  }
  .col-md10-offset-5 {
    margin-left: 50%;
  }
  .col-md10-offset-4 {
    margin-left: 40%;
  }
  .col-md10-offset-3 {
    margin-left: 30%;
  }
  .col-md10-offset-2 {
    margin-left: 20%;
  }
  .col-md10-offset-1 {
    margin-left: 10%;
  }
}

html:

<div class="container">
    <div class="row">
    <div class="col-md-10 col-sm-9 col-xs-10">
        <div class="row">
            <div class="col-md10-4 col-md10-push-6 col-xs-12" style="height:50px;background-color:#CA0088"></div>
            <div class="col-md10-6 col-md10-pull-4 col-xs-12">

                <div class="row">
                    <div class="col-sm-4 col-xs-12" style="height:50px;background-color:#A7A8AA"></div>
                    <div class="col-sm-4 col-xs-12" style="height:50px;background-color:#D0D1D3"></div>
                    <div class="col-sm-4 col-xs-12" style="height:50px;background-color:#E7E7E9"></div>     
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-2" style="height:50px;background-color:#E0922E"></div>
    </div>
</div>

Note you can't construct the additional CSS with Less only at the moment.

The column names for the first part .col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8, .col-md10-9, .col-md10-10 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } are hard code in mixins.less (see: https://github.com/twbs/bootstrap/issues/11321)

The second part can be construct by:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

@grid-columns: 10;
@media (min-width: @screen-md-min) {
  .make-grid-columns-float(md10);
  .make-grid(@grid-columns, md10, width);
  .make-grid(@grid-columns, md10, pull);
  .make-grid(@grid-columns, md10, push);
  .make-grid(@grid-columns, md10, offset);
}

Cause this set @grid-columns used in make-grid() and make-grid-columns-float you can't compile both grids once. See also: https://github.com/twbs/bootstrap/issues/11322

这篇关于Bootstrap3 中的列排序 - 推拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆