时间戳

首页 > 解决方案 > 使用 Bulma 的容器的自动边距

html - 使用 Bulma 的容器的自动边距

问题描述

解释

我正在使用 Bulma 创建带有固定导航栏的分割页面，但正如您在下面看到的那样，Title 1不会Title 2与导航栏和对齐Title 3，因为container左/右边距设置为自动，因此，在 0这第一节配置。有没有办法使用 Bulma 来实现这一点？

问题在 1024 像素或更高时开始发生。

代码

我已将container背景颜色更改为黄色，以便更容易看到问题。

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" />
</head>
<style>
  .container {
    background-color: yellow;
  }
</style>

<body>
  <nav class="navbar is-fixed-top" role="navigation" style="background-color: transparent;">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item">
          <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
        </a>
      </div>
    </div>
  </nav>
  <section class="columns is-vcentered is-gapless mb-0">
    <div class="column">
      <div class="hero is-fullheight is-info">
        <div class="hero-body">
          <div class="container">
            <h1 class="title has-text-dark">
              Title 1
            </h1>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="hero is-fullheight is-primary">
        <div class="hero-body">
          <div class="container">
            <h1 class="title has-text-dark">
              Title 2
            </h1>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="hero is-fullheight is-success">
    <div class="hero-body">
      <div class="container">
        <h1 class="title has-text-dark">
          Title 3
        </h1>
      </div>
    </div>
  </section>
</body>

标签： htmlcssmarginbulma

解决方案

推荐阅读