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



我在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标记显示在同一水平空间中,但都左对齐;我要第一个在左边,第二个在右边。

这行得通吗?(似乎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。来自的信息在模式卡页脚中向右拖动

最新更新