1

Twitter BootstrapでWebサイトを作成しようとしていますが、レスポンシブデザインを使用すると、ナビゲーションリンクを中央に配置する際に問題が発生します。

基本的に、タブレットと電話のデバイスには2列のナビゲーションバーが必要なので、上部にブランド名、下部にナビゲーションリンクがあります。

ブランド名を画面の中央に配置しても問題ありませんが、同じスタイルをナビゲーションリンクに適用しようとすると、左側に表示されなくなります。

この問題を実証するためのフィドルは次のとおりです。http： //jsfiddle.net/AsGHB/5/

関連するCSSは次のとおりです。

@media (max-width: 767px) { 

 #bn-logo {
  width: 100%;
  float: none;
  margin: 0 auto;
  text-align: center;
  }

 .navbar .nav {
   width: 100%;
   float: none;
   margin: 0 auto;
   text-align: center;
  }
}
4

1 に答える 1

0

次のコードを追加します。

@media (max-width: 767px)and (min-width: 480px) { 
  header{
    text-align:center;
  }
  .navbar .nav {
    float:none;
  }
  .navbar .nav > li {
    float: none;
    display: inline-block;
  }
}
于 2013-02-16T15:26:13.060 に答える