Bulma框架技术求助：文本垂直居中与列最小宽度设置

数据老陈

2026-8-6

问题解答

你的代码

JavaScript

document.addEventListener('DOMContentLoaded', function () {

  // Get all "navbar-burger" elements
  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Check if there are any nav burgers
  if ($navbarBurgers.length > 0) {

    // Add a click event on each of them
    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', function () {

        // Get the target from the "data-target" attribute
        var target = $el.dataset.target;
        var $target = document.getElementById(target);

        // Toggle the class on both the "navbar-burger" and the "navbar-menu"
        $el.classList.toggle('is-active');
        $target.classList.toggle('is-active');

      });
    });
  }

});

CSS

@font-face {
    font-family: Pacifico;
    src: url(fonts/pacifico/Pacifico-Regular.ttf);
}

.pacifico {
    font-family: Pacifico;
    font-size:1.5em;
    color:red;
}

.top_bg {background-image: url("https://png.pngtree.com/thumb_back/fw800/background/20200113/pngtree-ornate-cross-rhombus-repeating-symmetric-dark-blue-blue-and-white-tile-image_327096.jpg"); background-repeat:repeat-x;}
.top_bg  div {height:125px;}
.bottom_bg {background-image: url("images/bg_bottom_repeat.jpeg"); background-repeat:repeat-x;}
/* .bird { background-image: url("images/bird.png"); background-position: 50% 30%; background-attachment: inherit;} */
.under {text-decoration:underline;}
.navbar-item.is-mega {
  position: static;

  .is-mega-menu-title {
    margin-bottom: 0;
    padding: .375rem 1rem;
  }
}

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>222</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>

<div class="columns is-mobile is-centered is-vcentered top_bg mt-0 mb-0">
  <div class="column is-mobile pt-0 is-narrow"><img src="https://www.aiesec.in/wp-content/uploads/2018/08/Captain-america-1.jpg" style="height:125px"></div>
  <div class="column has-text-centered"><span class="pacifico"><nobr>God save the Queen</nobr></span></div>
</div>

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">1</a>
      <a class="navbar-item">2</a>
      <a class="navbar-item">3</a>
    </div>
  </div>
</nav>
<div class="columns mt-0 pt-0 mb-5">
  <div class="column"></div>
  <div class="column is-three-quarters"><img src="https://static.educalingo.com/img/en/800/african-elephant.jpg" class="box mr-5 is-pulled-left" style="width:20%;">
    <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum ullamcorper felis, nec maximus est suscipit nec. Proin vulputate rutrum metus id mattis. Proin eget sapien lacus. Phasellus a elit ante. Donec accumsan vel elit id malesuada. Sed et cursus massa. Nullam feugiat iaculis laoreet.</p>

<p class="mb-3">Curabitur tristique interdum luctus. Proin rutrum augue ac porta aliquet. Suspendisse quis iaculis dolor. Sed nec arcu sapien. Phasellus vitae convallis risus. Donec vel consectetur nulla, aliquet lacinia leo. Nullam vitae mauris dolor. Etiam ac malesuada tellus, id lacinia felis. Fusce ut turpis metus. Maecenas in interdum nulla. Quisque faucibus vitae est ut euismod. Nullam eu lorem elementum, tempor felis quis, maximus sem. Sed at ipsum fringilla, cursus nunc sed, ullamcorper elit. Aenean eget tortor quam.</p>

<p class="mb-3">Aliquam id ex efficitur quam faucibus bibendum a quis augue. Suspendisse potenti. Maecenas neque lectus, sagittis vitae porta quis, consequat vel lorem. Aliquam vitae gravida justo. Aliquam at orci eget magna scelerisque lacinia. Mauris ornare tincidunt suscipit. Fusce scelerisque erat sit amet dui mattis facilisis. Etiam nec lectus rutrum, viverra purus ultricies, ullamcorper eros.</p>

<p class="mb-3">Suspendisse elementum justo ut enim imperdiet ultricies. Sed non dolor tincidunt, cursus nunc sed, fringilla ligula. Duis a commodo nulla. Fusce vulputate molestie porta. Pellentesque at ligula orci. Proin hendrerit commodo finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eleifend gravida libero, sed bibendum sem pulvinar vitae.</p>

<p class="mb-3">Fusce sapien nulla, hendrerit et congue quis, hendrerit sit amet risus. Ut dignissim sodales nunc, sit amet viverra libero sagittis quis. Ut porta porta dolor, non aliquet massa faucibus id. Sed faucibus mollis mollis. Curabitur scelerisque lorem dolor, vitae aliquet magna aliquam vitae. Suspendisse est lorem, feugiat sit amet leo nec, vestibulum convallis quam. Praesent vitae arcu dapibus, euismod augue quis, bibendum ligula. Vestibulum quis eros dui. Donec pharetra sapien ligula, vel egestas est ornare ut. Suspendisse hendrerit, velit ut fringilla bibendum, velit elit congue neque, id rhoncus risus sapien vel ligula. Donec laoreet faucibus nulla, sed varius erat tincidunt sed. Donec vitae mi magna. Maecenas mollis facilisis tellus id convallis. Quisque sit amet egestas erat, tincidunt pretium metus. In hac habitasse platea dictumst. Nulla non laoreet lacus.</p>
  </div>
  <div class="column"></div>
</div>
</body>

问题一：文本「God save the Queen」垂直居中

你用了is-vcentered但没生效，核心原因是：is-vcentered仅能让columns容器的子元素（两个column）在容器内垂直居中，但包含文本的column本身没有启用内部元素的垂直对齐——你给.top_bg div设置了固定高度125px，但文本所在的column默认是块级元素，内容不会自动垂直居中。

两种解决方法：

方法1：用Bulma内置类修改HTML

给包含文本的column添加is-flex is-align-items-center类，让该列变成flex容器，内部元素自动垂直居中：

<div class="column has-text-centered is-flex is-align-items-center"><span class="pacifico"><nobr>God save the Queen</nobr></span></div>

方法2：自定义CSS

如果不想添加额外类，在你的CSS里追加这段代码：

.top_bg .column:not(:first-child) {
  display: flex;
  align-items: center; /* 实现垂直居中 */
  justify-content: center; /* 保持水平居中，和原有的has-text-centered效果一致 */
  height: 125px; /* 继承.top_bg div的高度，避免高度塌陷 */
}

问题二：移动端左右列空间消失

Bulma没有直接的内置min-width类，但可以通过两种方式实现移动端保留左右空间：

方法1：去掉空列，用响应式间距类

删除左右两个空的column，给主内容列添加Bulma的响应式间距类，移动端加左右内边距，大屏下让内容居中：

<div class="columns mt-0 pt-0 mb-5">
  <div class="column is-three-quarters mx-2 mx-auto-desktop">
    <!-- 原主内容 -->
  </div>
</div>

mx-2：移动端左右内边距为0.5rem（可根据需求换成mx-1/mx-3）
mx-auto-desktop：在桌面端（≥1024px）自动左右margin居中

方法2：给空列加最小宽度（自定义CSS）

给左右空列添加自定义类side-column，然后通过媒体查询设置移动端最小宽度：

修改HTML：

<div class="columns mt-0 pt-0 mb-5">
  <div class="column side-column"></div>
  <div class="column is-three-quarters">
    <!-- 原主内容 -->
  </div>
  <div class="column side-column"></div>
</div>

添加CSS：

@media (max-width: 768px) {
  .side-column {
    min-width: 1rem; /* 移动端保留的最小宽度，可按需调整 */
    flex-shrink: 0; /* 禁止列收缩，确保宽度生效 */
  }
}

这样在移动端时，左右列会保留设置的最小宽度，不会完全消失。

内容的提问来源于stack exchange，提问作者Cove

Bulma框架技术求助：文本垂直居中与列最小宽度设置

你的代码 #

JavaScript #

CSS #

HTML #

问题一：文本「God save the Queen」垂直居中 #

方法1：用Bulma内置类修改HTML #

方法2：自定义CSS #

问题二：移动端左右列空间消失 #

方法1：去掉空列，用响应式间距类 #

方法2：给空列加最小宽度（自定义CSS） #