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

Question

是否有一种“纯粹的 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 提供了一个解决方法。

Answer 1

查看修饰符的表格

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">

编辑

再看一遍，问题出在“按钮”类上，它是弹性的，不服从text-align。所以你可以删除“按钮”类。

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