kon39392回答ポイント 200ptウォッチ

bootstrapのExampleページのナビゲーションバーに関して

<div class="navbar navbar-fixed-top">部のソースを
そのままコピーして使用すると「Project Name」の文字が、
ナビゲーションバーの裏に隠れてしまい、かつ右によってしまいます。
（うっすら見えてはいます）

Exampleページで使用されているbootstrap.cssのVerは私が使用しているものと同じでした。

ちなみに
<div class="navbar navbar-fixed-top">を
<div class="navbar">と変更すると、
文字の位置は左に寄り、白文字になります。
ですが、バーの上部にマージンができてしまいます。

そこで、bootstrap.cssに下記のどちらかの修正を加えたいと考えますが、
CSSの経験が浅く望み通りに修正できません。

（方法１）
navbar-fixed-topクラスの文字を白、左配置になるように修正する。
（方法２）
navbarクラスの上部をtop:0状態にする

どちらの方法でもいいので解決策を教えてください。
または、そもそも文字が裏に隠れて、右に寄ってしまう原因が
予想できましたら教えてください。

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• Cherenkov2012/07/03 19:19:23

  満足200pt

  ヘタにコピペしてカスタマイズするよりも、
  Download · Twitter Bootstrap
  で作ったほうがはやいのでは。
  
  docs入りをダウンロードしてdocs/examples.htmlを見ると、

  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li class="">
              <a href="./index.html">Overview</a>
  

  navbarはこういう構造になっていて、それぞれの要素にcssが設定されています。適当に上の階層だけコピペして、レイアウトが崩れている状態なのですかね。
  無理に抜き出そうとせずに、小さい部分を改変しながら調整してみてください。

  スター

  • 

    4件のコメントを見る

  • Cherenkov 2012/07/03 22:43:42

    >そもそも文字が裏に隠れて、右に寄ってしまう原因
    ブラウザのウィンドウ幅を広げてみてください。広げると並んで表示されませんか？

    スター

  • Cherenkov 2012/07/03 22:46:01

    Customizeの「Responsive navbar」

    スター

  • Cherenkov 2012/07/03 22:47:40

    コメント欄のHTMLはcssやjsが抜けているのでコピペで再現できません。
    https://gist.github.com/
    http://jsfiddle.net/
    このあたりのサービスを使うと便利です。

    スター

  • kon39392 2012/07/04 22:32:42

    ありがとうございます。
    bootstrap.cssなど最低限のものは呼び出しているので
    大丈夫と思ってたのですが、
    きっとまだまだ私の理解不足なところがあるのでしょうね。
    
    アドバイスいただいたようなものを使わせていただきます。
    ありがとうございました。

    スター

その他の回答

この質問へのコメント

• Cherenkov2012/07/03 19:17:14
  回答者がコピペで再現できるソースなり手順を提示してください。
• kon393922012/07/03 22:00:14
  ありがとうございます。
  
  すみません、詳細を書こうと思ってましたが
  文字制限のためかなり省略した質問になってしまいました。
  
  あと、あえてパーツパーツを拝借して自分で触りながら作ってるのは
  どんな名前のクラスをどの辺で使ってるというのを
  一通り頭に入れておきたかったからです。
  
  手順は
  ①githubからVersion2.0.4を一式ダウンロードして設置
  ②BootstrapのExamplesページをFirebugで解析し、
  　ナビゲーションバー部である以下のコードをそのまま拝借。（ネストは省略）
  
  <div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
  <div class="container">
  <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </a>
  <a class="brand" href="#">Project name</a>
  <div class="nav-collapse">
  <ul class="nav">
  <li class="active">
  <a href="#">Home</a>
  </li>
  <li>
  <a href="#about">About</a>
  </li>
  <li>
  <a href="#contact">Contact</a>
  </li>
  </ul>
  </div>
  </div>
  </div>
  </div>
  
  今あらためてやってみると、IE8では質問と同様の表示（文字隠れ、右寄せ）
  FireFoxでは文字隠れ、左寄せになりました。
  
  

質問の情報

登録日時

2012-07-03 19:06:12

終了日時

2012-07-04 22:33:23

回答条件

1人5回まで

この質問のカテゴリ

• インターネット
• ウェブ制作

この質問に含まれるキーワード

人気の質問

• いつも大変お世話になっています。 アスペルガー精神3級独身会社員34歳男です。 最近心身共に疲れがもの凄…hayakushinene11日前
• https://hikky-mura.org/t/topic/2523/7 でsma200さんという方に戸塚ヨットスクールを勧められましたが、僕…hayakushinene12日前
• 親族（実家）の犬が無駄吠えをしています。朝方に一時間くらい吠えているらしい。昼にも一時間くらい吠え続…匿名質問者2215日前
• 度々すみません。 私は以前から大学入試・成績など教育関連のネガティブな夢を見ていましたが、ここ最近そ…hayakushinene153日前
• 学歴詐称ではなくて、貴族称号詐称について伺います。イボンヌの香りという映画で、ロシアの伯爵を詐称して…匿名質問者4日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ