使用Bootstrap从右到左列

Question

我有一行动态计数列,这些列是根据从数据库中提取的数据在JADE中生成的.项目是图像,它们的计数可以是0,可以是大数(最多100).

.row在框架内部,我希望能够以从右到左的顺序填充图像.意思是,第一个图像位于右上角,第二个图像位于第一个图像的左侧.每个图像使用col-md-2,因此在6个图像之后,第7个应该在第一个图像之下.

现在,当生成列时,第一个列位于左上角..因为它是默认值.

有什么方法可以改变吗？

尝试使用col-md-offset-X,它只影响第一行图像(因为它是一行)

Current:
--------------
| x  x  x  x |
| x  x       |
--------------

How it should be:
--------------
| x  x  x  x |
|       x  x |
--------------

Answer 1

为了达到目标,你必须改变漂浮状态.col-md-2.如有必要使用!important.

.col-md-2 {
    float: right !important;
}

DEMO

Answer 2

在 Bootstrap 4 中，如果您希望行的列从右到左开始，并且在 div 上设置多个列类，我建议通过添加justify-content-end到包含列的行来实现简单的解决方案。

这是一个例子：

<div class="row justify-content-end">
  <div class="col-md-6 col-lg-4 col-xl-3">
  First col text
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
  First col text
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
  Second col text
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
  Third col text
  </div>
</div>