使用 Bootstrap 将 flex 项目居中答案

【问题标题】：Centering flex items on wrap with Bootstrap使用 Bootstrap 将 flex 项目居中
【发布时间】：2018-09-18 14:52:24
【问题描述】：

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

我应该如何做到这一点？

【问题讨论】：

标签： twitter-bootstrap css flexbox bootstrap-4

【解决方案1】：

使用 mr-auto 和 justify-content-center 来容器 div。调整屏幕大小以检查 fiddle 和 sn-p

.my-class {
  margin: 100px auto;
  background-color: lightgrey;
  height: 60px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<Container class="my-class 
                  d-flex 
                  flex-wrap
                  align-items-center justify-content-center">
                  
                  
  
  
  <div class="col-auto mr-auto">
    <a class="pr-2">Item 1</a>
    <a class="px-2">Item 2</a>
    <a class="pl-2">Item 3</a>
  </div>
  <div class="col-auto">Right Item</div>
  
</Container>

https://jsfiddle.net/raj_mutant/gax5n8qa/33/

【讨论】：

【解决方案2】：

将grid breakpoints 用于列，text alignment 用于网格断点以在小屏幕上设置所需的行为。

<Container class="my-class 
                  d-flex 
                  align-items-center
                  flex-wrap
                  px-2">
  <div class="col-12 text-center col-md text-md-left">
    <a class="pr-2">Item 1</a>
    <a class="px-2">Item 2</a>
    <a class="pl-2">Item 3</a>
  </div>
  <div class="col-12 text-center col-md d-md-flex align-items-end flex-column">Right Item</div>
</Container>

https://www.codeply.com/go/fyKU8sINmi

【讨论】：

【解决方案3】：

仅在较小的屏幕宽度上使用 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 上的方向列（堆叠）

【讨论】：