CSS/Bulma：如何讓我的內容與我的導航欄品牌保持一致？

Question

我正在與Bulma建立一個頁面。

我希望我的內容的左邊緣與導航欄中品牌的左邊緣對齊。

目前，當頁面為全角時，內容位於導航欄品牌右側一點，當頁面寬度為移動尺寸時，內容與屏幕邊緣齊平。

像這樣：

我看到.columns在全寬時添加了填充，但在移動寬度時會消失。 我可能希望相反？

如何修復我的 HTML 以便導航欄和內容始終完美對齊？ 當視口處於移動寬度時，我不希望內容粘在屏幕的左邊緣。 使用 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

如果你需要微調布局，如果我是你，我不會使用布爾瑪； 我會從頭開始編寫 CSS。

這個庫做出了很多奇怪的決定，比如到處都是負邊距，這可能會使診斷發生了什么變得很棘手，特別是如果你是 CSS 新手。

它還基於 Flexbox，它將在不支持 flexbox 的瀏覽器上以絕對奇怪的方式呈現，比如 IE9——1000 人中有 1.5 人使用它，主要是教授和祖父母[支持，使用統計]。

如果您想使用 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