1

ロゴを navbar の中央に配置したいのですが、navbar 内でグリッド レイアウトを使用できますか、使用する必要がありますか、または何か他のことを行う必要があります。

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        <div class="navbar-header">
                            <!-- I want this at the center of navbar -->
            <a class="navbar-brand" href="#"><img src="logo.png"/></a>
        </div>
</div>
4

3 に答える 3

7

残念ながら、受け入れられた答えはBootstrap 2に html を使用することです。ただし、 Bootstrap 3を使用してこれを行う方法をいくつか考え出しました。これを行う最も簡単な方法は、おそらく css translate を使用することです。

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

ライブデモ: http://codepen.io/candid/pen/dGPZvR

この方法では、ロゴの背景画像を使用したり、ディスプレイに表示せずにテキストを含めることもできます。

HTML:

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

CSS:

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

ライブデモ: http://codepen.io/candid/pen/NxWoJL

何らかの理由でこれをモバイル ディスプレイでのみ行いたい場合は、.navbar-brand をメディア クエリでラップするだけです...

/* CENTER ON MOBILE ONLY */
@media (max-width: 768px) {
.navbar-brand {
        transform: translateX(-50%);
        left: 50%;
        position: absolute;
    }
}
于 2015-12-08T07:00:29.000 に答える
3

これは、ここのように、以前に数回尋ねられました。

ロゴが利用できなかったため、Gravatar を使用して、提供された HTML に似た jsfiddle をセットアップしました: http://jsfiddle.net/q68VS/

重要な CSS:

.nav-center {
    margin:0;
    float:none;
}

.navbar-inner{
    text-align:center;
}
于 2013-10-10T00:01:05.597 に答える