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

Answer 2

使用mr-auto和justify-content-center到容器div.Resize屏幕以检查小提琴和片段

.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/

Answer 3

对列使用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

使用Bootstrap将Flex项目置于包装上

3 个答案: