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の経験が浅く望み通りに修正できません。

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/07/03 19:06:12
  • 終了:2012/07/04 22:33:23

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/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が設定されています。適当に上の階層だけコピペして、レイアウトが崩れている状態なのですかね。
無理に抜き出そうとせずに、小さい部分を改変しながら調整してみてください。

他2件のコメントを見る
id:Cherenkov

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

2012/07/03 22:47:40
id:kon39392

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

アドバイスいただいたようなものを使わせていただきます。
ありがとうございました。

2012/07/04 22:32:42
  • id:Cherenkov
    回答者がコピペで再現できるソースなり手順を提示してください。
  • id:kon39392
    ありがとうございます。

    すみません、詳細を書こうと思ってましたが
    文字制限のためかなり省略した質問になってしまいました。

    あと、あえてパーツパーツを拝借して自分で触りながら作ってるのは
    どんな名前のクラスをどの辺で使ってるというのを
    一通り頭に入れておきたかったからです。

    手順は
    ①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では文字隠れ、左寄せになりました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません