使用 Bootstrap 将 flex 项目居中

Question

我在 Bootstrap 4 中有以下代码。有一个右边的项目和几个位于左边的项目：

---------------------------------------------------------------------
| item 1 item 2 item 3                                   Right item |
---------------------------------------------------------------------

当屏幕变得太小时，我希望它们是这样的：

---------------------------------------------
|            item 1 item 2 item 3           |
|                 Right item                |
---------------------------------------------

这几乎就是正在发生的事情......但我得到了：

---------------------------------------------
| item 1 item 2 item 3                       |
| Right item                                 |
---------------------------------------------

这是小提琴：https : //jsfiddle.net/gax5n8qa/3/

我应该如何实现这一目标？

Answer 1

仅在较小的屏幕宽度上使用 Flexbox 居中...

这种方式不需要使用网格，或向子 div 添加额外的类......

https://www.codeply.com/go/85w4qy1iIB

<container class="my-class 
                  d-flex 
                  align-items-center 
                  justify-content-center
                  justify-content-sm-between
                  flex-sm-row
                  flex-column
                  px-2">
    <div>
        <a class="pr-2">Item 1</a>
        <a class="px-2">Item 2</a>
        <a class="pl-2">Item 3</a>
    </div>
    <div>Right Item</div>
</container>

这是通过响应式地使用flexbox utils来实现的......

• justify-content-center- 在 xs 上对齐水平中心（隐含断点）
• justify-content-sm-between- sm 和 up 之间的空间
• flex-sm-row- sm 及以上的方向行
• flex-column- xs 上的方向列（堆叠）