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

【问题标题】：How can I have left- and right-aligned content at the same horizontal position in a Bulma modal footer?如何在 Bulma 模态页脚中的同一水平位置具有左对齐和右对齐的内容？
【发布时间】：2018-10-31 20:46:45
【问题描述】：

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

    <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标签出现在同一个水平空间，但都是左对齐的；我要左边第一个，右边第二个。

【问题讨论】：

使用 css 像：#site-type-p{text-align:right;}?
没有骰子 - 内容不会移动。可能和flexbox有关？

标签： html css bulma

【解决方案1】：

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

<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，因为 sn-p 的宽度很小，否则会显示在另一个之下。

更新：

<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的信息

【讨论】：

好吧，它们确实按照我的喜好对齐显示，但删除 modal-card-foot 类也会使背景透明（这很令人兴奋，但不是我想要的）。不过，这似乎是一个进步——也许我可以手动设置页脚的样式，而不是使用 Bulma 类。