如何在 Bulma 模态页脚中的同一水平位置左对齐和右对齐内容？

Question

我有一张布尔玛的模态卡片，我想在页脚的一侧有一个左对齐的p标签，另一侧有一个右对齐的p标签，占据相同的水平space.标准类，如级别和列，在页脚中似乎无法正常运行。我尝试了很多方法，但这是最新的方法。

    <footer class="modal-card-foot">
      <div id="site-type-div" class="columns is-inline-flex">
          <p id="chart-footer" class="level-item">Content</p>
          <p id="site-type-p" class="level-item">Type</p>
      </div>
    </footer>

两个 p 标签出现在同一条水平线上 space，但都是左对齐；我要左边第一个，右边第二个

Answer 1

这行得通吗？（似乎 modal-card-foot class 不能很好地处理关卡和列之类的东西）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> 
    <footer class="">
      <div id="site-type-div" class="level is-mobile">
          <p id="chart-footer" class="level-left">Content</p>
          <p id="site-type-p" class="level-right">Type</p>
      </div>
    </footer>

添加了 is-mobile，因为该代码段宽度较小，否则会一个接一个地显示。

更新：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> 
    <footer class="modal-card-foot" style="justify-content: space-between;">
      <div id="site-type-div" class="">
          <p id="chart-footer" class="">Content</p>
      </div>
      <div id="site-type-div" class="">
          <p id="site-type-p" class="">Type</p>
      </div>
    </footer>

看来您需要更改 modal-card-foot 样式以使用 justify-content: space-between; 并将它们分成 2 个 div。来自 is-pulled-right in modal-card-footer

的信息

如何在 Bulma 模态页脚中的同一水平位置左对齐和右对齐内容？

How can I have left- and right-aligned content at the same horizontal position in a Bulma modal footer?

html

css

bulma