如何在引导程序中计算推/拉顺序单元？答案

【问题标题】：How I can calculate push/pull order cell in bootstrap?如何在引导程序中计算推/拉顺序单元？
【发布时间】：2014-10-13 09:51:41
【问题描述】：

我尝试像图像一样订购单元格，这个引导代码就是这样做的，但我仍然尝试和测试以获得这个订单，有没有办法计算网格中每个 col 的推或拉。

我的问题是另一种方式，我需要订购单元格，以便我可以打印像图像一样的单元格，我尝试并测试拉/推的许多价值以获取此代码..有没有办法计算价值？

<div class="row row-4">
    <div class="col-xs-3 col-md-push-9">5</div>
    <div class="col-xs-4 col-md-push-2">4</div>
    <div class="col-xs-1 col-md-pull-3">3</div>
    <div class="col-xs-3 col-md-pull-7">2</div>
    <div class="col-xs-1 col-md-pull-11">1</div>
</div>

【问题讨论】：

它正在工作.. 如果你在这里看到它：jsfiddle.net/rahulrulez/jqu5hghc/embedded/result
是的，伙计，它的工作原理，^_^，对不起，我的英语很糟糕，我的意思是在这个问题上..我做了 10 次测试才能得到这个最终结果..我知道是推动-9，push-2 ...我为每个测试一个值，然后在浏览器中检查它，最后我设置了这个值并且它工作正常..知道我需要什么..我如何直接计算推/拉值...示例 12col - xs3 = push-9 ..然后我在第一个 div 中设置 push-9 但是当 fo 到第二个 12col-4 = push8 并且它的 false .....像这样 ...
请不要使用“bootstrap”标签，使用“twitter-bootstrap”，因为它意味着别的东西
@Daniel 好的，我会记住的，谢谢

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

考虑到这段代码，以及我们的 12 列：

<div class="row">
    <div class="col-xs-3">5</div>
    <div class="col-xs-4">4</div>
    <div class="col-xs-1">3</div>
    <div class="col-xs-3">2</div>
    <div class="col-xs-1">1</div>
</div>

我们有：

+---+-----------------+------------------+------------+---------+
| ° | Wanted position | Current position | Difference | Class   |
+---------------------+------------------+------------+---------|
| 1 | 1               | 12 (1+3+4+1+3)   | -11        | pull-11 |
| 2 | 2  (1+1)        | 9  (1+3+4+1)     | -7         | pull-7  |
| 3 | 5  (1+1+3)      | 8  (1+3+4)       | -3         | pull-3  |
| 4 | 6  (1+1+3+1)    | 4  (1+3)         | +2         | push-2  |
| 5 | 10 (1+1+3+1+4)  | 1                | +9         | push-9  |
+---+-----------------+------------------+------------+---------+

拍照时间：

【讨论】：

+1 不错的答案，但 Bootstrap 列使用相对定位。
@Christina 我的错。使用left 和right 并不意味着使用绝对定位。我删除了相关行。