bootstrap d-flex 移动版布局不工作

Question

我在 parent 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 组进入柱状样式可以这么说。因此，该按钮会扩展一点，直到它几乎占据了末尾带有信息符号的列的 space 的 80%。

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

编辑：

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

Answer 1

在 head 标签内添加这个。

<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</head>

这适用于移动设备。

Answer 2

我基本上只是按照你的草图做了。为了演示目的，我交换了一些标记，但这些类对你有用。

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

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

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>

bootstrap d-flex 移动版布局不工作

bootstrap d-flex layout in mobile not working

html

css

flexbox

bootstrap-4

angular