CSS/Bulma：如何让我的内容与我的导航栏品牌保持一致？

Question

I'm building a page with Bulma .我正在与Bulma建立一个页面。

I want the left edge of my content to align with the left edge of the brand in my navbar.我希望我的内容的左边缘与导航栏中品牌的左边缘对齐。

At the moment, when the page is fullwidth, the content is positioned a little to the right of the navbar brand and when the page width is mobile size, the content is flush with the edge of the screen.目前，当页面为全角时，内容位于导航栏品牌右侧一点，当页面宽度为移动尺寸时，内容与屏幕边缘齐平。

Like so:像这样：

I see that .columns adds padding when at full width but this disappears when at mobile width.我看到.columns在全宽时添加了填充，但在移动宽度时会消失。 I probably want that to be the other way around?我可能希望相反？

How can I fix my HTML so that the navbar and content align perfectly at all times?如何修复我的 HTML 以便导航栏和内容始终完美对齐？ I don't want the content to stick to the left edge of the screen when the viewport is at mobile width.当视口处于移动宽度时，我不希望内容粘在屏幕的左边缘。 What's the best way to do it using Bulma?使用 Bulma 的最佳方法是什么？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
  </head>
  <body>

  <!-- Navbar -->
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <strong>brand</strong>
        </a>

        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div class="navbar-menu">
        <div class="navbar-end">
          <a class="navbar-item">Home</a>
          <a class="navbar-item">About</a>
        </div>
      </div>
    </div>
  </nav>

  <main class="container content">
    <div class="columns">
      <div class="column">
        <h1 class="title">
          Hello World
        </h1>
        <p class="subtitle">
          My first website with <strong>Bulma</strong>!
        </p>
      </div>
    </div>
  </main>
  </body>
</html>

Answer 1

If you need to fine tune the layout, I would not use Bulma if I were you;如果你需要微调布局，如果我是你，我不会使用布尔玛； I'd write the CSS from scratch.我会从头开始编写 CSS。

This library has made lots of strange decisions, like negative margins all over the place, that may make it tricky to diagnose what's going on, especially if you're new to CSS.这个库做出了很多奇怪的决定，比如到处都是负边距，这可能会使诊断发生了什么变得很棘手，特别是如果你是 CSS 新手。

It's also based on Flexbox, which will render in absolutely bizarre ways on browsers that don't support flexbox, like IE9--which 1.5 out of 1000 people use, mostly professors and grandparents [support , usage stats ].它还基于 Flexbox，它将在不支持 flexbox 的浏览器上以绝对奇怪的方式呈现，比如 IE9——1000 人中有 1.5 人使用它，主要是教授和祖父母[支持，使用统计]。

If you want to use Bulma, you can make your content left-aligned at full screen width by including CSS with the following lines after your Bulma CSS [ fiddle ]:如果您想使用 Bulma，您可以通过在 Bulma CSS [ fiddle ] 之后包含以下行的 CSS 来使您的内容在全屏宽度下左对齐：

/**
* Navbar
**/

a.navbar-item {
  padding: 0;
}

.navbar > .container div.navbar-brand {
  margin-left: 0;
}

/**
* Body
**/

.container .columns {
  margin-left: 0;
}

.columns .column {
  padding-left: 0;
}

 /** * Navbar **/ a.navbar-item { padding: 0; } .navbar > .container div.navbar-brand { margin-left: 0; } /** * Body **/ .container .columns { margin-left: 0; } .columns .column { padding-left: 0; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script> </head> <body> <!-- Navbar --> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="container"> <div class="navbar-brand"> <a class="navbar-item" href="#"> <strong>brand</strong> </a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div class="navbar-menu"> <div class="navbar-end"> <a class="navbar-item">Home</a> <a class="navbar-item">About</a> </div> </div> </div> </nav> <main class="container content"> <div class="columns"> <div class="column"> <h1 class="title"> Hello World </h1> <p class="subtitle"> My first website with <strong>Bulma</strong>! </p> </div> </div> </main> </body> </html>

CSS/Bulma：如何让我的内容与我的导航栏品牌保持一致？

问题描述

1 个解决方案

解决方案1
4 已采纳 2018-08-24 11:41:09

CSS/Bulma：如何让我的内容与我的导航栏品牌保持一致？

问题描述

1 个解决方案

解决方案1 4 已采纳 2018-08-24 11:41:09

解决方案1
4 已采纳 2018-08-24 11:41:09