Bulma：如何将元素左对齐，但在移动设备上居中

如何解决Bulma：如何将元素左对齐，但在移动设备上居中

是否有一种“纯粹的 Bulma 方式”（没有自定义 css）来对齐留在桌面上的元素，但将其放在比 iPad 小的设备上？ 为了学习正确使用 Bulma，我想避免使用任何自定义 css。

我尝试过使用级别，它在较小的设备上很好地居中，但在桌面上不左对齐 as you can see on the screenshot. 奇怪的是，它在页脚右侧按预期工作：

<footer class="section footer is-widescreen">
  <div class="container">

      <div class="columns">
        <div class="column level-left">
          <div class="buttons level-item ">
            <a class="button" target="_blank" href="https://deletefacebook.com/"><img src="/placeholder/icons/facebook-f.svg" alt=""></a>
            <a class="button" target="_blank" href="#"><img src="/placeholder/icons/instagram.svg" alt=""></a>
            <a class="button" target="_blank" href="https://twitter.com"><img src="/placeholder/icons/twitter.svg" alt=""></a>
          </div>
        </div>

        <div class="column has-text-centered has-text-right-tablet">
          <p class="subtitle is-6">&copy; {{ Now.Year }} codeklasse</p>
          <a href="https://bulma.io">
            <img
              src="https://bulma.io/images/made-with-bulma.png"
              alt="Made with Bulma"
              width="128"
              height="24">
          </a>
        </div>
    </div>
  </div>
</footer>

或者我可以将桌面左侧的内容对齐，但是 can't center it on mobile :

<footer class="section footer is-widescreen">
    <div class="container">
        <div class="columns">

            <div class="column ">
                <div class="buttons has-text-centered has-text-left-tablet">
                    <a class="button" target="_blank" href="https://deletefacebook.com/"><img src="/placeholder/icons/facebook-f.svg" alt=""></a>
                    <a class="button" target="_blank" href="#"><img src="/placeholder/icons/instagram.svg" alt=""></a>
                    <a class="button" target="_blank" href="https://twitter.com"><img src="/placeholder/icons/twitter.svg" alt=""></a>
                </div>
            </div>

            <div class="column has-text-centered has-text-right-tablet">
                <p class="subtitle is-6">&copy; {{ Now.Year }} codeklasse</p>
                <a href="https://bulma.io">
                    <img src="https://bulma.io/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
                </a>
            </div>
        </div>
    </div>
</footer>

---

编辑：

Bulma 的创建者好心地为 custom CSS 提供了解决方法。

解决方法

看修饰符表

https://bulma.io/documentation/helpers/typography-helpers/

例如，它看起来与我不一致

has-text-left-mobile 仅适用于移动尺寸。
has-text-left-tablet 适用于平板电脑和所有更大尺寸的设备。

因此您不能假设 has-text-centered 将适用于其余尺寸，您应该同时指定手机和平板电脑尺寸。

关于你的第二个代码

<div class="buttons has-text-centered-mobile has-text-left-tablet">

编辑

再看一遍，问题出在类“buttons”上，它是 flex 并且不遵守 text-align。所以你可以删除“buttons”类。

<div class="has-text-centered has-text-left-tablet">