カテゴリー:
CSS
タグ:
 css Bootstrap

このエントリーをはてなブックマークに追加
更新日時:
2013年01月08日(火)
作成日時:
2013年01月08日(火)

前の記事 / 次の記事

いい感じにというか、デフォルトのままだといまいちなのでましにする。

いまいちなところ。

  • ブラウザを縮小した時にナビゲーションバーの左のパディングが削られる(幅が減る)
  • ブラウザを縮小した時にレイアウトが崩れる(高さが増える)

やること。
BootstrapのCSSをオーバーライドする。
Bootstrapよりも後に読み込まれるファイル名のcssファイルをつくって、次のクラスをオーバーライド。
(次の記述はscss。)

.navbar-fixed-top
  // 元々定義されているが、改めて定義しないとブラウザ縮小時にレイアウトが崩れる
  position: fixed
  // ブラウザ縮小時に左のパディングが削られるのを防ぐ
  margin-left: 0  
.navbar-inner
  // ブラウザ縮小時に上下に余計なパディングが付くのを防ぐ
  padding-top: 0
  padding-bottom: 0