CSS / Bullma：コンテンツをナビゲーションバーのブランドに合わせるにはどうすればよいですか？

debugcn 投稿 Dev

user3574603

ブルマでページを作成しています。

コンテンツの左端をナビゲーションバーのブランドの左端に揃えたい。

現時点では、ページが全幅の場合、コンテンツはナビゲーションバーブランドの少し右側に配置され、ページ幅がモバイルサイズの場合、コンテンツは画面の端と同じ高さになります。

そのようです：

.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>

ドゥハイム

レイアウトを微調整する必要がある場合、私があなたならBulmaは使用しません。CSSを最初から作成します。

このライブラリは、いたるところに負のマージンがあるなど、多くの奇妙な決定を下しました。これは、特にCSSを初めて使用する場合に、何が起こっているのかを診断するのが難しい場合があります。

また、Flexboxに基づいており、IE9のように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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-1

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

CSS / Bullma：コンテンツをナビゲーションバーのブランドに合わせるにはどうすればよいですか？

CSS / Bullma：コンテンツをナビゲーションバーのブランドに合わせるにはどうすればよいですか？

cssを使用してナビゲーションバーの背景画像をナビゲーションバーの境界線に合わせて拡大縮小するにはどうすればよいですか？

コンテンツの背後にあるサブメニューをCSSに合わせるにはどうすればよいですか？

CSSで2つのナビゲーションバーアイテム、次に画像、次に2つのナビゲーションバーアイテムを垂直方向に配置するにはどうすればよいですか？

固定サイドナビゲーションバーをhtml / cssの右側に移動するにはどうすればよいですか？

純粋なCSSスライダーのナビゲーションバーを作成するにはどうすればよいですか？

cssを使用して上部のナビゲーションバーに戻るボタンを追加するにはどうすればよいですか？

CSSスライダーナビゲーションにトランジションを追加するにはどうすればよいですか？

ブートストラップまたはCSSを使用してナビゲーションバーアイテムのレスポンシブを修正するにはどうすればよいですか？

TwitterブートストラップCSSのナビゲーションバーのリストアイテムにポップオーバーを表示するにはどうすればよいですか？

scssを使用してrails4のブートストラップナビゲーションバーcssをオーバーライドするにはどうすればよいですか？

CSSのナビゲーションバーにロゴを追加するにはどうすればよいですか？

2行のナビゲーションバーを作成するにはどうすればよいですか？htmlとcssのみを使用

CSSを使用してバナーとナビゲーションバーを配置するにはどうすればよいですか

ナビゲーションメニューにカーソルを合わせたときに、ホバーが現在のように場所全体に表示されないようにするには、CSSで何を変更する必要がありますか？

CSSを介してMagento2.3.3のナビゲーションセクションの位置を変更するにはどうすればよいですか？

現在のCSSレスポンシブドロップダウンナビゲーションメニューを展開するにはどうすればよいですか？ドロップダウンが期待どおりに機能しない

cssでナビゲーションドロップダウンメニューを調整するにはどうすればよいですか？

既存のマテリアライズCSSボタンとナビゲーションバーにカスタムCSSスタイルを追加するにはどうすればよいですか？

CSS「画像と一緒にナビゲーションバーを中央に配置するにはどうすればよいですか？」

マテリアライズCSSナビゲーションバーのすべてのリンクのテキストの色を変更するにはどうすればよいですか？

メニューボタンをナビゲーションバーのマテリアライズCSSに表示するにはどうすればよいですか？

JSとCSSでフロートナビゲーションバーを作成するにはどうすればよいですか？

htmlとCSSのみを使用して1つのナビゲーションバーコードページだけで多くのHTML5ページを作成するにはどうすればよいですか？

cssテーブルのコンテンツをレスポンシブにするにはどうすればよいですか

小さな画面用のレスポンシブナビゲーションバーを作成しようとしていますが、左側のリンクをcssドロップダウンメニューに変更するにはどうすればよいですか？

bootstrap.cssの.nav> li> aのパディングを直接変更せずに、Bootstrapナビゲーションバーのアイテム間のスペースを減らすにはどうすればよいですか？

純粋なCSSを使用してモバイルナビゲーショントグルを作成するにはどうすればよいですか？

cssのナビゲーションメニューのborder-leftを設定するにはどうすればよいですか？

html cssのみを使用して、固定位置のヘッダーとサイドナビゲーションを使用してレスポンシブページを作成するにはどうすればよいですか？