移动设备中的 bootstrap d-flex 布局不起作用

Question

我在父 div 中嵌套了三个 div，如下所示：

.button-class {
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  margin-left: 45rem;
}

.svg-class {
  margin-top: 1rem;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="d-flex mb-3">
  <div class="mr-auto p-2">
    <h2>text</h2>
  </div>
  <div class="button-class p-2">
    <ion-button></ion-button>
  </div>
  <div class="svg-class p-2">
    <svg></svg> //code
  </div>
</div>

我曾经mr-auto将第一个元素对齐到最左边，而其他两个元素应该以一定的边距差异向左（但不是最左）对齐。

所以，目前我的问题是我想用以下方式来展示这一点。左侧有一个文本，右侧有一个按钮和一个信息符号 svg。对于移动设备，我希望文本和按钮 + svg 组进入柱状样式。因此按钮会稍微延伸，直到占据了列的几乎 80% 的空间，最后有信息符号。

对于较大的屏幕，它看起来很好，但是当我进行移动设置时，例如使用移动版本d-flex或在文本之后和按钮之前添加换行符（仅在移动设备中可见），它停止运行，并显示为移动设备中并排的三个元素。例如，我更改d-flex为d-md-flex并在单个 div 内获取按钮和信息符号（以使它们作为一个组移动到单独的列中），但随后发生的情况是，在移动设备和更大的屏幕中，文本和按钮都会出现在一个列中，信息符号移动到下一个。即使使用默认 CSS，任何人都可以帮忙解决这个问题吗？我尝试了各种不同的引导类，但它们不起作用。真的很难弄清楚如何以既适合大屏幕又适合小屏幕的方式最好地做到这一点。

编辑：

我尝试将其更改为默认 CSS flex，其中我将父容器设置为 a flex-box，然后对于两个子元素（一个包含文本，另一个包含按钮和 svg），我flex-grow分别给它们 2 和 1，然后执行 aflex-direction: row在较大的屏幕和flex-direction: col较小的屏幕中。它确实有效，但由于某种原因，一个问题是我无法单独设置 SVG 元素的样式，例如，如果我想通过给它一个 来将其下推margin-top，它现在已经成为一个svg样式问题。

Answer 1

我基本上只是做了你所画的草图。我出于演示目的交换了一些标记，但这些课程将适合您。

本质上，Bootstrap 在此版本的 Bootstrap 中没有xs类规范。但是，您可以使用flex-sm-row和flex-column类来提高响应能力。您可以使用flex-sm-row保持行水平向上sm，然后flex-column在 xs 屏幕宽度（<576px）上垂直堆叠。

我还在您的上添加了text-center或 ，以便它以移动设备为中心。我还稍微改变了你的标记。将浏览器大小调整为 576 像素以下以查看移动视图。请参阅下面的 CSS 和 HTML 更改：text-align: center;h2

img {
  width: 30px;
  height: 30px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="d-flex flex-sm-row flex-column justify-content-between">
  <div class="wrapper">
    <h2 class="text-center">text</h2>
  </div>

  <div class="d-flex mr-2 justify-content-center align-items-center">
    <div class="button-class">
      <button class="mr-3">Button</button>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/%3Fuestionmark_encircled.svg/1280px-%3Fuestionmark_encircled.svg.png">
  </div>
</div>