59

ブランドロゴが常に中央に残るように、Bootstrap 3 navbar を実装しようとしています。これはコードです：

<div class="navbar navbar-fixed-top navbar-default">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a class="brand" style="margin: 0; float: none;" href="#">
      <img src="/Content/themes/next/images/logo.png" /></a>
      <div class="nav-collapse">
        <ul class="nav">
          <li> <a href="#">Item 1</a></li>
          <li> <a href="#">Item 1</a></li>
          <li> <a href="#">Item 1</a></li>
        </ul>
      </div>
      <ul class="nav pull-right">
        <li>
          <a href="#">
            <div class="nextCog"></div>
          </a>
        </li>
      </ul>
      <span class="navbar-text pull-right">superpup1 </span>
    </div>
  </div>
</div>

見栄えの良いナビゲーションバーになります。 ここに画像の説明を入力

ただ、ロゴ（緑）はしっかり真ん中に残してほしいです。このスタイルを「ブランド」クラスのタグに追加しています。

<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
  <img src="/Content/themes/next/images/logo.png" />
</a>

これにより、問題が部分的に解決されます。ロゴは中央にありますが、残りのナビゲーション バー要素が押し下げられます。

ここに画像の説明を入力

これは排除したい望ましくない影響です。解決策を提案できますか？最初からロゴを中央に配置するのは間違ったアプローチでしょうか?

4

7 に答える 7

83

これを試して：

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

ロゴの中央に 50% を置き、ロゴの幅の半分を引いて、ズームインおよびズームアウト時に問題が発生しないようにします。

フィドルを見る

于 2014-05-01T00:46:12.693 に答える
56

最も簡単な方法はcss transformです:

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

デモ: http://codepen.io/candid/pen/dGPZvR

中央揃えの背景ロゴ ブートストラップ 3

この方法は、動的にサイズ変更されたロゴの背景画像でも機能し、text-hide クラスを利用できます。

CSS:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  width: 200px; /* no height needed ... image will resize automagically */
}

HTML:

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>

ただし、フレックスボックスも使用できます。ただし、この方法を使用すると、navbar-brandの外に移動する必要がありnavbar-headerます。この方法は素晴らしいですが、画像とテキストを並べて表示できるようになりました。

ブートストラップ 3 のロゴを中央に配置

.brand-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.navbar-brand {
  display: flex;
  align-items: center;
}

デモ: http://codepen.io/candid/pen/yeLZax

これらの結果をモバイルでのみ実現するには、上記の css をメディア クエリ内にラップするだけです。

@media (max-width: 768px) {

}
于 2015-12-08T07:46:36.877 に答える
29

2018年更新

ブートストラップ 3

この例が役立つかどうかを確認してください: http://bootply.com/mQh8DyRfWY

ブランドは、..

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

あなたのマークアップは、3 ではなく Bootstrap 2 用navbar-innerです。

編集 - 別のアプローチが使用されていますtransform: translateX(-50%);

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

http://www.bootply.com/V7vKDfk46G

ブートストラップ 4

Bootstrap 4 ではmx-auto、フレックスボックスを使用して、ブランドやその他の要素を中央に配置できます。説明については、Bootstrap 4 で navbar コンテンツを配置する方法を参照してください。

以下も参照してください。

左、中央、または右に配置された項目を持つブートストラップ NavBar

于 2014-05-01T16:58:54.127 に答える
5

古い質問ですが、後世のためだけです。

最も簡単な方法は、navbar-brand の背景画像として画像を使用することです。カスタム幅を必ず入れてください。

.navbar-brand
{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    background-image: url('logo.png');
}
于 2014-08-10T23:36:15.570 に答える
0

ロゴが中央に配置され、リンクが正当化されるソリューション。

各リンクの単語の長さに応じて、nav の推奨されるリンクの最大数は 6 です。

リンクが 5 つある場合は、空のリンクを挿入し、次のようにスタイルを設定します。

class="hidden-xs" style="visibility: hidden;"

このようにして、リンクの数は常に偶数になります。

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  .navbar-nav > li {
    float: none;
    vertical-align: bottom;
  }
  #site-logo {
    position: relative;
    vertical-align: bottom;
    bottom: -35px;
  }
  #site-logo a {
    margin-top: -53px;
  }
</style>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Nav</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav nav-justified navbar-nav center-block">
        <li class="active"><a href="#">First Link</a></li>
        <li><a href="#">Second Link</a></li>
        <li><a href="#">Third Link</a></li>
        <li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
        <li><a href="#">Fourth Link</a></li>
        <li><a href="#">Fifth Link</a></li>
        <li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li>
      </ul>
    </div>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

結果を表示するには、実行スニペットをクリックしてからページ全体をクリックします

フィドル

于 2016-07-19T10:25:30.937 に答える