我在 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标 checkout 现在同一个水平空间中,但都是左对齐的;我想要左边第一个,右边第二个。
最佳答案
这行得通吗? (似乎 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
关于html - 如何在 Bulma 模式页脚中的同一水平位置具有左对齐和右对齐的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53091721/