4

ロゴを中央に配置しようとし.brandました：

.brand { margin-left: auto; margin-right: auto; }

これは私のトップナビゲーションバーのレイアウトです:

http://jsfiddle.net/J4zkJ/3/

しかし、うまくいかないようです。

この回答を投稿する前にスタックを検索しました。上記で使用したコードは、回答された質問から取得されました。

.brand を中央に配置する方法はありますか?

注意: 私は を使用できませんposition:absolute and fixed。これをレスポンシブに行いたいです ( responsive)

また、私はこれを試しました：

.brand { 
  margin:0 auto !important;
  padding:0 auto !important;
  position:absolute !important;
  right:0px;
  left:0px;
   z-index:9999999999 !important;

}
4

3 に答える 3

6 
.navbar .brand {
  margin-left: auto;
  margin-right: auto;
  width: 60px;
  float: none;
}

私はそれに任意の幅を与えました。好きなように設定してください。

jsフィドル

于 2013-01-23T18:14:35.620 に答える
0

私はstyle.cssでそれらを使用しただけで、うまくいきました：

    /* ナビゲーションバーのヘッダー */
    .navbar-header {
        テキスト整列: 中央;
        余白: 10px;
        float: なし!重要;
    }

    /* ウェブサイト名 */
    .navbar-ブランド {
        float: なし!重要;
    }
于 2014-09-24T13:57:07.990 に答える
0

ブートストラップ 3 の使用

ブートストラップの navbar.less クラスを強化するために、global.less ファイルに 3 つのクラスを追加しました。

このアプローチは、レスポンシブな @media ルールのすべてのサイズで機能しますが、メニュー項目の幅に応じて font-size と menu-collapse ポイントを調整する必要があります (このアプローチでは、navbar-brand が完全に配置されます。他のメニュー項目）。

スタイル： 

.navbar-brand-centered {
    position: absolute;
    top: 0;
    left: 50%;
    height: 50px;
    width: 200px;  /* bootstrap has max-width: 200px rule */
    margin-left: -100px;
    margin-top: 8px;
    text-align: center;
  }

  .navbar-brand-centered {
    color: @navbar-inverse-brand-color;
    &:hover,
    &:focus {
      color: @navbar-inverse-brand-hover-color;
      background-color: @navbar-inverse-brand-hover-bg;
    }
  }

  .navbar-brand-centered {
    display: block;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    padding: @navbar-padding-vertical @navbar-padding-horizontal;
    font-size: @font-size-large;
    font-weight: 500;
    line-height: @line-height-computed;
    color: @navbar-brand-color;
    text-align: center;
    &:hover,
    &:focus {
      color: @navbar-brand-hover-color;
      text-decoration: none;
      background-color: @navbar-brand-hover-bg;
    }
  }

利用方法： 

<div class="navbar navbar-fixed-top">
    <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <!-- Be sure to leave the brand out here if you want it shown -->
    <a class="navbar-brand-centered" href="/"><span style="font-size: 2em">mess<span style="color: red;">2</span>dress</span></a>

    <!-- Place everything within .navbar-collapse to hide it until above 768px -->
    <div class="nav-collapse collapse navbar-responsive-collapse">
        <!-- YOUR MENU ITEMS HERE -->

これは私にとってはうまくいきましたが、ブートストラップが実装するフロートベースのアプローチと統合するためのより良い方法があると確信しています. フィードバックをお待ちしています。

于 2013-09-17T20:47:12.510 に答える