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

Question

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

我试过使用关卡，它在较小的设备上很好地居中，但在桌面上没有左对齐 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

看修改器的table

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

例如，它在我看来并不一致

has-text-left-mobile 仅适用于手机尺寸。
has-text-left-tablet 适用于 tablet 和所有更大的尺寸。

因此您不能假设 has-text-centered 将适用于其余尺寸，您应该指定移动尺寸和 tablet 尺寸。

关于你的第二个代码

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

编辑

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

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

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

Bulma: How to align an element left, but center it on mobile

html

css

alignment

bulma