Question

我在布尔玛有一个模态卡，我想在页脚的一侧有一个左对齐的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标签显示在相同的水平空间中，但都保持对齐；我想要第一个在左边，第二个在右边。

Answer 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，因为该代码段的宽度较小，否则将一个显示在另一个下方。

更新：

<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

的信息

在布尔玛模态页脚中，如何在同一水平位置具有左对齐和右对齐的内容？

1 个答案: