使用 Bootstrap 从右到左列-解网

问：

我有一行，其中包含根据获取的数据在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 |
--------------

HTML css 推特引导 3 哈巴狗

<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 演示

0赞 Pepelius 8/26/2014 #2

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

总是有一整行，但只需使用你留空的第一行。 

您可以使用“右拉”类名来完成相同的工作，但问题是当您调整屏幕大小时，元素仍然粘在一起而不是相互重叠。我所做的是按照我的风格.css： /* 定义一个具有空属性的类 */ .col-rtl{} /*然后创建一个媒体查询并将浮点数放在那里 */ @media屏幕和（min-width： 992px）{ .col-rtl{ float：right;现在，当您调整屏幕大小时，元素会遵循 bootstrap.css 的说明，只有当屏幕为 992px 时，它们才会向右浮动。

0赞 Anouar khaldi 8/28/2019

您可以添加到 bootstrap.css 中以将其应用于所有列。.row>div{ float: right !important; }

6赞 EddyG 6/14/2019 #4

在 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>

1赞 Gennadiy Utkin 3/13/2020 #5

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

2赞 Mohammad Faisal 7/30/2020 #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>

使用 Bootstrap 从右到左列

Right to left columns using Bootstrap

评论

评论

评论

评论