twitter-bootstrap 使用 Bootstrap 从右到左列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25500537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Right to left columns using Bootstrap
提问by Idan
I have a row with a dynamic count of columns that is generated in JADE based on data fetched from the database. Items are image and the count of them can be 0 and can be a large number (max 100).
我有一行包含动态列数，该行基于从数据库中获取的数据在 JADE 中生成。项目是图像，它们的计数可以是 0，也可以是一个大数字（最多 100）。
The .row is inside of a frame and I want to be able to populate the images in a right-to-left orders. Meaning, first image is at the top-right corner, second one is to the left of the first. each image uses col-md-2 so after 6 images the 7th should be under the first one.
.row 位于框架内，我希望能够以从右到左的顺序填充图像。意思是，第一张图片在右上角，第二张在第一张的左边。每张图片都使用 col-md-2，所以在 6 张图片之后，第 7 张应该在第一个下面。
Right now, when generating the columns the first one is at the top-left corner.. as it's the default.
现在，当生成列时，第一个位于左上角.. 因为它是默认设置。
Any way to change that?
有什么办法可以改变吗？
Tried using col-md-offset-X and it's only effecting the first line of images (because it's a single row)
尝试使用 col-md-offset-X 并且它只影响第一行图像（因为它是单行）
Current:
--------------
| x x x x |
| x x |
--------------
How it should be:
--------------
| x x x x |
| x x |
--------------
回答by Evgeniy
回答by EddyG
In bootstrap 4, if you want the columns of a row to start from right to left and you set multiple column classes on a div, I suggest an easy solution by adding justify-content-endto the row enclosing the columns.
在引导程序 4 中，如果您希望一行的列从右到左开始并在一个 div 上设置多个列类，我建议通过添加justify-content-end到包含列的行中来提供一个简单的解决方案。
Here is an example:
下面是一个例子：
<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>
回答by Gennadiy Utkin
In bootstrap 4 U can use flex-row-reverse class https://getbootstrap.com/docs/4.4/utilities/flex/
在 bootstrap 4 你可以使用 flex-row-reverse 类 https://getbootstrap.com/docs/4.4/utilities/flex/
回答by ProDexorite
I don't know how automated your system is in this case, the question doesn't really tell me if you're using some sort of a image gallery, but if it's not, if it's all manually added content, why not create empty columnsto justify the last items.
我不知道你的系统在这种情况下有多自动化，这个问题并没有真正告诉我你是否使用了某种图片库，但如果不是，如果都是手动添加的内容，为什么不创建空的列来证明最后一项。
Always have a full row, but just use something like at the very first ones that you are leaving blank.
总是有一个完整的行，但只需使用一些像 你留下空白的第一行。
回答by Suresh Ponnukalai
I am not sure about the bootsrap, But here is the generic way of approach to solve your problem.
我不确定 bootsrap，但这是解决问题的通用方法。
HTML
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
CSS
.main div {
float: right;
width: 70px;
}
.main div:nth-child(6n + 7) {
clear: right;
}
