在布爾瑪模態頁腳中，如何在同一水平位置具有左對齊和右對齊的內容？

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-pull-right