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

我不确定引导程序，但这是解决问题的通用方法。

<强> HTML

<div class="main">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
    <div>thirteen</div>
    <div>fourteen</div>
    <div>fifteen</div>
</div>

<强> CSS

.main div {
    float: right;
    width: 70px;
}
.main div:nth-child(6n + 7) {
    clear: right;
}

FIDDLE DEMO

Answer 3

我不知道你的系统在这种情况下的自动化程度如何，问题并没有真正告诉我你是否正在使用某种图像库，但如果不是，如果它都是手动添加的内容，为什么不要创建空列来证明最后的项目。

始终有一个完整的行，但只需使用类似 的内容，就像您要留空的第一行一样。

Answer 4

在引导程序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>

Answer 5

在bootstrap 4中，U可以使用flex-row-reverse类 https://getbootstrap.com/docs/4.4/utilities/flex/

Answer 6

您可以使用bootstrap的flex组件来实现此目的。

<div class="d-flex flex-row-reverse">
  <div class="bg-info">Flex item 1</div>
  <div class="bg-info">Flex item 2</div>
  <div class="bg-info">Flex item 3</div>
</div>

Answer 7

您可以设置------------------------------------------------------- T E S T S ------------------------------------------------------- Executing org.evosuite.runtime.InitializingListener SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder". SLF4J: Defaulting to no-operation (NOP) logger implementation SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details. Running tutorial.LinkedListIterator_ESTest Tests run: 5, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.558 sec - in tutorial.LinkedListIterator_ESTest Running tutorial.Node_ESTest Tests run: 5, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.065 sec - in tutorial.Node_ESTest Running tutorial.StackTest Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0 sec - in tutorial.StackTest Running tutorial.LinkedList_ESTest Tests run: 11, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.127 sec - in tutorial.LinkedList_ESTest Running tutorial.Stack_ESTest Tests run: 6, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.101 sec - in tutorial.Stack_ESTest Results : Tests run: 28, Failures: 0, Errors: 0, Skipped: 0 [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 04:15 min [INFO] Finished at: 2020-10-29T15:07:28-04:00 [INFO] ------------------------------------------------------------------------属性，以从右到左/ RTL对列进行排序。

将其设置在“行”容器上：

flex-direction

或将Bootstrap类设置为容器：

flex-direction: row-reverse;

使用Bootstrap从右到左列

7 个答案: