Bootstrap 4 - 使用Flexbox和响应列

Question

我正在尝试使用位于行开头和结尾的按钮来创建一行.这是两个图像.首先,当浏览器最大化时:

第二个是在我调整浏览器大小之后:

为此,我正在实现以下代码:

<div class="d-flex justify-content-end">
   <div class="mr-auto p-2">Flex item 1</div>
   <div class="p-2">Flex item 2</div>
</div>

小提琴

只是为了学习如何将Flexbox与B4一起使用.代码确实正确定位项目,但是当我调整大小时,列不会堆叠.

知道如何让它完全响应？

谢谢您的帮助.

Answer 1

该flex-row和flex-column类也可以使用响应.您可以使用flex-sm-row以保持行水平在sm和向上,然后flex-column垂直堆叠在xs屏幕宽度上...

<div class="d-flex flex-sm-row flex-column">
  <div class="mr-auto p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
</div>

http://www.codeply.com/go/G3Z6OLCBtF